responsive-design - 响应列表项

Question

我有一个列表项，我希望它们自动扩展到父宽度。我的 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% 浏览器宽度。

里面的 playlistHolder 和列表项需要 100% 宽度和响应式，以便它们遵循包装器的宽度。

我怎样才能用css实现呢？

Answer 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;
}

Answer 2

首先，为了构建响应式布局，您必须使用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;
}

这是输出：