这看起来很简单。我正在尝试在父 div 中获得 10 个 div，宽度均为 10%。父 div 为 960px，以页面为中心，margin:0 auto，背景为红色。我将 .tenPercent 设置为 10% 还是 96px 并不重要。结果是一样的，只有 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>
最佳答案
你的 CSS 有两个问题:
- div 之间的空格是因为
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>关于html - 连续 10 个 div，每个 10%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32895987/