连续 10 个 div，每个 10%

Question

这看起来很简单。我试图在父级 div 内获得 10 divs 全部 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>

Answer 1

添加float:left；到 .tenPercent class.

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

当您在应用了内联块的元素之间使用 display: inline-block spaces/returns 等时，将被考虑并呈现。您可以将其视为在每个内联块元素之间添加一个 space。

在我看来，这是使用 display: inline-block over floats 的主要缺点。

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。最好在容器中添加一个 class（类似于 container 的语义），然后使用以下 CSS:

.container {
    width: 960px;
    background: red;
    margin: 0 auto;
}
    .container:after {
        display: table;
        content: '';
        clear: both;
    }

jsFiddle Demo

Answer 3

您的 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; 将处理从边框添加的像素。

这里有一个 fiddle 可以玩：http://jsfiddle.net/0ztoe6tk/

Answer 4

您的 CSS 有 2 个问题：

div之间的space是因为inline-blocks被一个白色的space隔开。您可以使用 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 5

因为display:inline-block考虑到了html中的white-space。如果您删除 div 之间的白色-space，它将按预期工作。 from here

*,
*: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;
}

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

Answer 6

除 float 和 display:inline-block 外，您还有其他选择；

flexbox 可以非常轻松地做到这一点...没有 clearfixing，没有空格...简单。

支持：IE10+ 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>

连续 10 个 div，每个 10%

10 divs in a row 10% each

html

css

margin