Question

所以，我在互联网上搜索过，发现的问题有点相似，但并不完全相同。

我想要以表格形式显示某种列表，并且我想使用它所在的父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，但加上边框＆amp;保证金，总数超过100.因此结果只是每行3个列表项，并且在父div的总宽度下很多。

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

我可以将边框放在框内，这样可以解决边框问题，但我需要列表项框之间的边距（空白）。

Answer 1

1）box-sizing: border-box;，宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距。

2）width: calc(25% - 10px);您使用margin:5px因此必须减去宽度为10px的{{1}}：25％。

(margin-left:5) and (margin-right:5)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试计算宽度：C:\ProgramData\Anaconda3\lib\site-packages\sklearn\base.py in clone(estimator, safe) 65 % (repr(estimator), type(estimator))) 66 klass = estimator.__class__ ---> 67 new_object_params = estimator.get_params(deep=False) 68 for name, param in six.iteritems(new_object_params): 69 new_object_params[name] = clone(param, safe=False) TypeError: get_params() missing 1 required positional argument: 'self'

Answer 3

您可以使用flex来解决它（我建议您在css-tricks.com上阅读它）。 flex做的是它分配项目并考虑边际。基本上你甚至不需要使用宽度但使用flex-basis。使用border-box（read about it）会将您添加到li的填充+边框计算为总宽度，因此不会是25％+ 20px，但25％包括20px，如果这样做的话感？

DEMO

<ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">3</li>
  <li class="list__item">4</li>
</ul>

.list {
  display: flex;
  width: 100%;
  background-color: lightcoral;
  justify-content: center;
  align-content: center;
}

.list__item {
  list-style-type: none;
  box-sizing: border-box;
  display: block;
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
  flex-basis: 25%
}

Answer 4

＆＃13;

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

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

4件 - 每件25％ - 带边框＆amp;余量

4 个答案: