2つの列リストの塗りつぶし幅

divに2つの列リストがあり、2つの列がdivの全幅を埋めるようにします。ここで2つの列リストの塗りつぶし幅

<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％全体に2つの列の緑のボックスを埋める方法はありますか？これを行うためのよりクリーンな方法がありますか？

出典

2016-06-28 iefpw

はわずか47％の幅であり、5pxのマージンを使用して、私は彼らが完全に右に、divの内側に、第二の右側に含む要素 –

を満たしていない驚いていませんよ列の緑のリスト項目。だから、私はそれを埋める方法を見つけようとしているのです。なぜなら、このCSSは私にとって理想的ではないからです。 – iefpw

リスト項目（余白）の間にスペースが必要です。 – iefpw

コードを確認してください、私はいくつか変更しました。各liの間にはスペースを入れないでください。そうでない場合は、 "display：inline-block"の代わりに "float：left"を使用します。

.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

これはliからスペースを削除する代わりに、ディスプレイ使用float:leftを使用するのでは、これを試してみてください。マージンを増やしている場合は、それに応じて幅を調整します。リストの項目を考慮し

.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

2つの列リストの塗りつぶし幅

答えて

関連する問題