如何修复每个列表项之间的这些差距？

时间：2016-11-29 10:13:30

标签： html css

我正在为自己创建一个投资组合，我正在努力解决这些列表项目。我希望它们具有相同的高度并且彼此内联。在每个列表项中有一个额外的行，我相信这是导致它的原因。我该如何解决这个问题？

以下是它的样子： Picture of the problem

＆＃13;
＆＃13; 
<div id="content-wrapper">
  <ul>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
    </li>
  </ul>
</div>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

使用float: left;代替display: inline-block;，看起来应该没问题。此外，如果您想要完全删除它们之间的空格设置margin: 0;，#content-wrapper ul li上的所有内容：

body{
    margin: 0;
    padding: 0;
}
#content-wrapper {
  background-color: #EBEBEB;
  margin: 0 auto;
  width: 100%;
  display: inline-block;
}
#content-wrapper ul {
  list-style-type: none;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
}
#content-wrapper ul li {
  background-color: whitesmoke;
  color: #1B1B1B;
  text-align: center;
  float: left;
  width: 50%;
}
#content-wrapper ul li p {
  padding: 10px;
  height: 150px;
}
#content-wrapper ul li img {
  width: 100%;
}

#inner-wrapper{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  border-top: 2.5px solid #0F0F0F;
}
<div id="content-wrapper">
  <div id='inner-wrapper'>
  <ul>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
    </li>
  </ul>
    </div>
</div>

答案 1 :(得分：0)

您的代码还有另一个版本。一切都在这里。

任何其他问题，请问：）

  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>


body{
  margin:0;
  padding:0;
}
#wrapper{
  width:100%;
  height:2000px;
  background:#eee;
}
#portfolio{
  width:900px;
  height:1200px;
  margin:auto;
}
.project{
  width:47.5%;
  height:400px;
  background:#fff;
  float:left;
  margin:10px 2.5% 0 0;
}
.project img{
  width:80%;
  height:auto;
  margin-left:10%;
}
.project p{
  text-align:center;
}

http://codepen.io/raze444/pen/mOBjOx?editors=1100

答案 2 :(得分：0)

使用＃content-wrapper ul li上的inline-table替换inline-block以获得即时解决方案LiveOnFiddle。在小屏幕上，最后一个li p元素溢出p标签高度为150px。因此，您可以将其更改为200px或为小屏幕编写媒体查询。 

#content-wrapper {
  background-color: #EBEBEB;
  margin: 0 auto;
  width: 100%;
  border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
  list-style-type: none;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
}
#content-wrapper ul li {
  background-color: whitesmoke;
  color: #1B1B1B;
  text-align: center;
  display: inline-table;/*Change  inline-block to inline-table*/
  margin: 5px 2.5px;
  width: 45%;
}
#content-wrapper ul li p {
  padding: 10px;
  height: 200px; /*Change the height 150px to 200px*/
}
#content-wrapper ul li img {
  width: 100%;
}
<div id="content-wrapper">
  <ul>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
    </li>
  </ul>
</div>

答案 3 :(得分：0)

我建议您使用flexbox代替display-inline以下内容：

将display: flex添加到父容器

 #content-wrapper ul {
  list-style-type: none;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;  
}


#content-wrapper {
  background-color: #EBEBEB;
  margin: 0 auto;
  width: 100%;
  border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
  list-style-type: none;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;  
}
#content-wrapper ul li {
  background-color: whitesmoke;
  color: #1B1B1B;
  text-align: center;
  margin: 5px 2px;
  width: 45%;
}
#content-wrapper ul li p {
  padding: 10px;
  height: 150px;
}
#content-wrapper ul li img {
  width: 100%;
}
<div id="content-wrapper">
  <ul>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
    </li>
  </ul>
</div>

有关文档 - A Complete Guide to Flexbox

相关问题
最新问题