Question

我要使用此

问题在于列表项位于同一行。我如何将每一项放在下一行以在每行的开头创建一个带有图像的垂直列表？

<ul id="services-list">
  <li>
    <a href="https://www.google.com" class="image"></a>
    <div class="content">
      <h3>Header</h3>
      <p>text goes here</p>
    </div>
  </li> 
  <li>
    <a href="https://www.google.com" class="image"></a>
    <div class="content">
      <h3>Header</h3>
      <p>text goes here</p>
    </div>
  </li>
</ul>

css：

/*a little bit of reset*/
#services-list, #services-list p, #services-list h3 {
  list-style: none;
  margin:0; padding:0;
}    
#services-list > li {
  float:left;
  margin-right: 20px;
  width: 130px;
}    
#services-list > li > .image {
  display:block;
  float:left;
  margin-right:10px;
}

/*
this instructions are to force the dimensions of image and its container <a>
*/
#services-list > li > .image,
#services-list > li > .image > img {
  width:24px; height:24px;
}

Answer 1

只需除去下面的CSS左侧的浮点，就可以完成...

#services-list > li{
  float: none;
}

Answer 2

该示例浮动列表，以便它与CSS并存。

<style>
    li { float: left; list-style: none; }
</style>

Answer 3

您还可以为li项添加100％的宽度

#services-list > li {
    width: 100%;
}

Answer 4

对于您的代码，这是可行的：

li{
  list-style: none !important;
  float: left !important;
  width: 100% !important;
}

在这里https://codepen.io/agamj474/pen/zJmrde

如何强制列表项转到差异行？

4 个答案: