10个div连续10%

Question

10个div连续10%

这看起来很简单.我试图在父div中获得10个div,所有10%宽.父div为960px,并以页边距为中心,边距为: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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ori*_*ori 5

您的CSS中有2个问题:

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	130 次
最近记录：	10 年，8 月前