如何修復每個列表項目之間的這些空白？

Question

我正在爲自己創建一個投資組合，我正在努力處理這些列表項目。我希望他們成爲同一個高度，並彼此聯合。在每個列表項目中都有一個額外的行，我相信這是造成它的原因。我將如何解決這個問題？

這裏是什麼樣子： Picture of the problem

#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-block; 
 
    margin: 5px 2.5px; 
 
    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>

Answer 1

還有就是你對你的代碼的另一個版本。一切都在這裏。

任何其他問題，只問:)

<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

Answer 2

使用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>

Answer 3

用＃content-wrapper ul的內聯表替換內聯塊以便即時解決方案LiveOnFiddle。在小屏幕上，p標籤高度爲150px的最後一個li p元素溢出。所以你可以改變它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>

Answer 4

我建議你應該在的地方像下面使用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