0

リスト項目があり、それらを親の幅に自動拡張したいと考えています。私のhtmlは次のようになります：

<div class="wrapper">
  <div class="playlistHolder">
    <div class="playlist_inner">
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
    </div>
  </div>
</div>

ラッパーは、ブラウザー幅 100% である必要があります。

内部のプレイリスト ホルダーとリスト アイテムは、100% の幅とレスポンシブである必要があるため、ラッパーの幅に従います。

どうすればcssでそれを達成できますか?

4

2 に答える 2

1

このフィドルを見てください：http://jsfiddle.net/umZb8/1/

.wrapper {
  width: 100%;
  background: red;
  padding: 5px;
}

.playlistHolder {
  width: 100%; 
}

.playlist_inner ul {
  list-style:none;
  padding: 0;    
}

.playlist_inner ul > li {
  width: 100%;
  padding: 0;
  background: blue;
}
于 2013-08-10T00:31:14.490 に答える
0

まず、レスポンシブ レイアウトを構築するには、 CSS メディア クエリを使用する必要があります。あなたの場合（質問を正しく理解していれば）、ラッパーの幅をauto. すべての子アイテムは、親の幅の値を継承します。

div.wrapper {
    width: auto;
    background: #abcdef;
    margin: 0px;
    padding: 20px;
    border: 1px solid red;
}

div.playlistHolder {
    width: inherit;
    margin: 0;
    padding: 0;
}

div.playlist_inner
{
    width: inherit;
    border: 1px solid #000cee;
    margin: 0;
    padding: 0;
}

div.playlist_inner > ul {
    background: #ffffff;
    margin: 0;
}

div.playlist_inner > ul > li {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

これは出力です：

html+css 出力

于 2013-08-10T10:10:31.440 に答える