兩列的列表填充div的寬度

我有一個div的兩列列表，我希望兩列填補整個div的寬度。兩列的列表填充div的寬度

<body> 
    <div class="box"> 
    <ul class="list"> 
     <li class="list-item">asdfasfd</li> 
     <li class="list-item">asdfasfd</li> 
     <li class="list-item">asdfasfd</li> 
     <li class="list-item">asdfasfd</li> 
     <li class="list-item">asdfasfd</li> 
    </ul> 
    </div> 
</body> 


.box { 
    border: 1px solid black; 
    background-color: gray; 
    width: 450px; 
    box-sizing: border-box; 
} 

ul.list { 
    list-style-type: none; 
    padding: 0; 
} 

li.list-item { 
    display: inline; 
    display: inline-block; 
    height: 40px; 
    width: 47%; 
    padding: 10px; 
    margin: 5px; 
    box-sizing: border-box; 
    background-color: green; 
}

這裏是小提琴：

https://jsfiddle.net/h7112hrm/1/

現在有到底1-2px更多的間距。有沒有辦法將兩列綠色框填充到整個外部div的100％？有沒有更乾淨的方法來做到這一點？

來源

2016-06-28 iefpw

考慮到列表中的項目只有47％的寬度，並使用5px的保證金，我並不感到驚訝，他們沒有完全包含的元素 –

填寫正確的，在div裏面，第二個權列綠色列表項。這就是爲什麼我試圖找到一種方法來填補它，因爲這個CSS對我來說似乎並不理想。 – iefpw

我需要列表項目（邊距）之間的間距。 – iefpw

請檢查代碼，我修改了幾件事情。不要在每個李之間留下任何空間。否則使用「float：left」而不是「display：inline-block」。

.box { 
 
\t border: 1px solid black; 
 
\t background-color: gray; 
 
\t width: 450px; 
 
} 
 

 
ul.list { 
 
\t list-style-type: none; 
 
\t padding: 0; 
 
    margin:0; 
 
} 
 

 

 
li.list-item { 
 
\t display: inline-block; 
 
\t height: 40px; 
 
\t width: calc(50% - 10px); 
 
\t padding: 10px; 
 
    margin: 5px; 
 
\t box-sizing: border-box; 
 
\t background-color: green; 
 
}

<body> 
 
\t <div class="box"> 
 
\t <ul class="list"> 
 
\t \t <li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li> 
 
\t </ul> 
 
\t </div> 
 
</body>

來源

2016-06-28 14:28:35 San

我需要的是在這些情況下計算。謝謝。 – iefpw

你可以只添加填充到.box類的左側，推所做的一切。

.box { 
border: 1px solid black; 
background-color: gray; 
width: 450px; 
box-sizing: border-box; 
padding-left: 4px;<----- added

}

來源

2016-06-28 14:38:43 whisk

嘗試此，代替使用顯示使用float:left的這個從li移除的空間。如果您增加保證金，則相應地調整您的寬度。

.box { 
    border: 1px solid black; 
    background-color: gray; 
    width: 450px; 
    height:300px; 
} 

ul{ 
    list-style-type: none; 
    padding: 0; 
    background:#111; 
} 

.list-item { 
    float:left; 
    width:49.55%; 
    height:100px; 
    margin:1px; 
    background-color:green; 
    padding:10px; 
    box-sizing:border-box; 
}

來源

2016-06-28 14:56:49 frnt

兩列的列表填充div的寬度

回答

相關問題