html – 4项 – 每项25％ – 有边框和保证金

2023年1月28日 229次阅读

所以,我搜索了互联网,发现了一些有点相似但不完全相同的问题.

我有一些列表,我希望以表格形式显示,我想使用它所在的父DIV的整个宽度(所以100％).
我想每行显示4个项目,并使用像thias这样的东西：

ul.li{
 list-style-type: none;
 float: left;
 display: box;
 border: 1px solid black;
 margin: 5px;
 padding: 10px;
 width: 25%
}

你不必是一个数学家,看看这里有什么问题：25％* 4是100,但加上边框&保证金,总数超过100.因此结果只是每行3个列表项,并且在父div的总宽度下很多.

我尝试使用表而不是列表项,它更容易获得确切的100％宽度,但它不适用于我的页面的其余部分,因为它不是那么灵活,它不是我需要的.

我可以将边框放在框内,这解决了边框问题,但我需要列表项的框之间的边距(空白).

最佳答案

1) box-sizing: border-box;, the width and height properties (and min/max properties) includes content, padding and border, but not the margin.

2) width: calc(25% - 10px); you use of margin:5px so must subtract 10px for (margin-left:5) and (margin-right:5) of width:25% .

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
点赞