Question

这看起来很简单。我试图在父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>

Answer 1

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

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

Answer 2

您应该使用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

Answer 3

您还有其他选项，而不是float和display:inline-block;

flexbox可以轻松地完成非常 ...没有明确修复，没有空白......简单。

支持：IE10 +每CanIUse.com

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你的css应该是这样的：

.tenPercent {
    color:Black;
    float:left;
    box-sizing: border-box;
    display:inline-block;
    border:1px solid black;
    width:10%;
}

请注意float: left和box-sizing的添加内容。 float: left将消除间距，而box-sizing: border-box;则会处理从边框添加的像素。

这是一个小提琴：http://jsfiddle.net/0ztoe6tk/

Answer 5

添加浮动：左;到.tenPercent课程。

来自display：inline-block。如果将列向左浮动，它们将按预期工作。

当您使用display时，将考虑并呈现应用了内嵌块的元素之间的内联块空间/返回等。您可以将其视为在每个内联块元素之间添加单个空格。

这是使用显示器的主要缺点：在我的拙见中，使用内联块来浮动。

Answer 6

这是因为display：inline-block考虑了html中的空白区域。如果你删除div之间的空白区域，它会按预期工作。 from here

＆＃13;

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.Row {
}
.Row__item {
  color: #000;
  display: inline-block;            
  border: 1px solid black;
  width: 10%;
  margin: 0;
}

＆＃13;

<div class="Row"><div class="Row__item">1</div><div class="Row__item">2</div><div class="Row__item">3</div><div class="Row__item">4</div><div class="Row__item">5</div><div class="Row__item">6</div><div class="Row__item">7</div><div class="Row__item">8</div><div class="Row__item">9</div><div class="Row__item">10</div></div>

＆＃13;

10个div连续10％

6 个答案: