响应列表项

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

首先，为了构建Responsive Layout，您必须使用CSS Media Queries。在你的情况下（如果我正确理解了这个问题），将包装器的宽度设置为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;
}

这是输出：