一排排10个div各10%
一排排10个div各10%
提问于 2015-10-01 20:07:29
这看起来太简单了。我正试着在一个10%宽的家长中得到10个div。父div为960px，以页边距为0的页面居中:0 auto，背景为红色。不管我是用10%的.tenPercent还是96 or制作的。结果是一样的，只有9次比赛和第10场比赛。看起来它们上有一个左边框(或填充)，但是是什么原因造成的呢？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tenPercent
{
color:Black;
display:inline-block;
border:1px solid black;
width:10%;
}
</style>
</head>
<body>
<div style="width:960px;background-color:Red;margin:0 auto">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
</body>
</html>回答 6
Stack Overflow用户
回答已采纳
发布于 2015-10-01 20:14:34
您的CSS中有两个问题：
- divs之间的空格是因为
inline-blocks由一个空白分隔。您可以使用font-size: 0;删除空间。 - 第二个问题是元素的宽度，它受边界的影响。
box-sizing: border-box;会解决这个问题的。
.container {
width: 960px;
background-color: Red;
margin: 0 auto;
font-size: 0; /** this removes the space between the divs **/
}
.tenPercent {
box-sizing: border-box; /** this adds the borders into the width **/
color: Black;
display: inline-block;
border: 1px solid black;
width: 10%;
font-size: 14px;
}<div class="container">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
Stack Overflow用户
发布于 2015-10-01 20:12:38
您应该使用float: left而不是display: inline-block。
此外，边框在宽度计算中是不包括的，因此实际上您的元素是10% +2像素(左侧为1px，右侧为1px)。您应该添加一个box-sizing属性：
.tenPercent {
color: #000;
float: left;
border: 1px solid black;
width: 10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}由于现在对子元素使用float，所以还需要向容器中添加一个clearfix。最好向容器中添加一个类(类似于container)，然后使用以下CSS：
.container {
width: 960px;
background: red;
margin: 0 auto;
}
.container:after {
display: table;
content: '';
clear: both;
}jsFiddle Demo
Stack Overflow用户
发布于 2015-10-01 20:28:57
除了float和display:inline-block，您还有其他选择；
flexbox可以很好地清除easily...no，没有whitespace...simple。
Support：IE10+ per CanIUse.com
* {
box-sizing: border-box;
margin: 0;
}
.parent {
background-color: plum;
text-align: center;
margin: 0 auto;
display: flex;
}
.tenPercent {
flex: 0 0 10%;
/* restricted to 10% width */
border: 1px solid grey;
}<div class="parent">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32895987
复制相关文章
相似问题
腾讯云开发者
