Question

我在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的间距。有没有办法将两列绿色框填充到整个100％的外部div？有更清洁的方法吗？

Answer 1

请检查代码，我修改了一些东西。不要在每个李之间留下任何空间。否则使用＆＃34; float：left＆＃34;代替＆＃34;显示：inline-block＆＃34;

＆＃13;

.box {
	border: 1px solid black;
	background-color: gray;
	width: 450px;
}

ul.list {
	list-style-type: none;
	padding: 0;
  margin:0;
}


li.list-item {
	display: inline-block;
	height: 40px;
	width: calc( 50% - 10px );
	padding: 10px;
  margin: 5px;
	box-sizing: border-box;
	background-color: green;
}

＆＃13;

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

＆＃13;

Answer 2

你可以在.box类的左侧添加填充，将所有内容都推到一边。

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

}

Answer 3

尝试此操作，而不是使用显示使用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;
}

两列列表填充div宽度

3 个答案: