Css 两列列表填充div宽度_Css

Css 两列列表填充div宽度

css

Css 两列列表填充div宽度,css,Css,我在一个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">asdfasf

我在一个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;
}



asdfasfd
asdfasfd
asdfasfd
asdfasfd
asdfasfd

.盒子{
边框：1px纯黑；
背景颜色：灰色；
宽度：450px；
框大小：边框框；
}
保险单{
列表样式类型：无；
填充：0；
}
li.清单项目{
显示：内联；
显示：内联块；
高度：40px；
宽度：47%；
填充：10px；
保证金：5px；
框大小：边框框；
背景颜色：绿色；
}

这是小提琴：

现在末端的间距增加了1-2倍。是否有办法将两列绿色框填充到整个外部div的100%？有更干净的方法吗？

请检查代码，我已经修改了一些东西。不要在两个李之间留任何空间。否则请使用“float:left”而不是“display:inline block”

.box{
边框：1px纯黑；
背景颜色：灰色；
宽度：450px；
}
保险单{
列表样式类型：无；
填充：0；
保证金：0；
}
li.清单项目{
显示：内联块；
高度：40px；
宽度：计算（50%-10px）；
填充：10px；
保证金：5px；
框大小：边框框；
背景颜色：绿色；
}



asdfasfd
asdfasfd
asdfasfd
asdfasfd

您只需在

.box

类的左侧添加填充，即可将所有内容覆盖

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

.box{
边框：1px纯黑；
背景颜色：灰色；
宽度：450px；
框大小：边框框；
左填充：4px；尝试此操作，而不是使用显示使用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;
}

考虑到列表项只有47%的宽度，并且使用5px的边距，我并不奇怪它们没有完全填充包含元素到第二列绿色列表项右侧的div内。这就是为什么我试图找到填充它的方法，因为这个CSS对我来说并不理想。我需要列表项之间的间距（空白处）。谢谢。我需要的是“计算”。在这种情况下，我需要的是计算。谢谢。