16

我非常习惯在 WPF 中工作，但我最近开始使用 html 构建网站。

我想在 html 中列出一些东西（比如说，每个都包含一个图片和一个描述），它们的行为就像它们在 WPF 包装面板中一样。

我想我几乎做对了，通过这样做：



<ul id="listofthings">
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Dog</a></h2>
       <p>The dog is a domesticated form of the gray wolf, a member of the Canidae family.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Cat</a></h2>
       <p>The cat, also known as the domestic cat or housecat, is a small furry domesticated carnivorous mammal.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>

<!--...etc. etc.-->

</ul>

并像这样设置css：



#listofthings{
 background-color:gray;
 list-style-type:none;
}


#listofthings li{
 width: 300px;
 float: left;
}

.picture{
 background-repeat: no-repeat;
 width: 80px;
 height: 80px;
 position: absolute; 
}

.description{
 position: relative;
 top: 0;
 margin-left: 80px;
 padding-bottom: 2em;
}

因此，这些项目已设置为向左浮动，并且效果很好。但我也希望整个列表具有纯灰色背景。目前，它只显示部分灰色背景。我想我希望列表可以伸展，以便它围绕它的项目，我想？换句话说，因为父 ul 有一个灰色背景，我希望它的孩子在那个灰色背景的“顶部”。我该怎么做呢？

TIA。

4

1 回答 1

14

浮动可能会弄乱布局，因此请改用 display: inline-block 。

#listofthings li{
 width: 300px;
 display: inline-block;
}
于 2010-11-15T08:02:59.627 回答