box-sizing的属性
| 属性 | 含义 |
|---|---|
| content-box | 默认W3C标准，非IE标准 |
| border-box | 把边框宽度加入到元素宽度内 |
| inherit | 从父级继承 |
先看一个html代码
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css如下
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;margin: 0;padding: 0;
}
*::before, *::after {
box-sizing: border-box;
}
ul, li {
list-style: none;
}
ul {
/* 重点 */
font-size: 0;
}
.ul li {
width: 20%;display: inline-block;
border: 10px solid #f00;
font-size: 14px;
}
或者是删除元素标签后面的内容，把li放在同一行
<ul class="ul">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
网友评论