Question

每当我想制作一个html页面我都有问题，为什么html页面不到100％？让我在例子中解释一下：

＆＃13;

<!doctype html>
    <html>
      <head>
        <title>Test</title>
        <style>
          html
          {
            margin: 0;
            padding: 0;
            width: 100%;
          }
          body
          {
            margin: 0;
            padding: 0;
          }
          .row
          {
            width: 100%;
            margin: 0 auto;
            padding: 0;  
          }
          .col-1
          {
            width: 10%;
            margin: 0;
            padding: 0;
            display: inline-block;
          }
        </style>
      </head>
      <body>
        <div class="row">
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
          <div class="col-1">Some text</div>
        </div>
      </body>
    </html>

＆＃13;

为什么上一个div来到下一行？全宽10％意味着我们可以添加10行div，但在现实世界中它不会发生？！我检查了所有边距，填充，边框，但我没有看到任何东西。你能告诉我为什么会这样吗？

Answer 1

当你给display: inline-block;时，它会在它们之间产生空格。以这种方式使用相同的代码：

<div class="row">
  <div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div><!--
  --><div class="col-1">Some text</div>
</div>

小提琴：http://output.jsbin.com/xorahifipe

您也可以使用float: left，但您需要向父母提供overflow: hidden;，或以某种方式清除它。在原始示例中，float以这种方式工作：

.row {
  width: 100%;    /* This is not necessary */
  margin: 0 auto; /* This is not necessary */
  padding: 0;     /* This is not necessary */
  overflow: hidden; 
}
.col-1 {
  width: 10%;
  margin: 0;      /* This is not necessary */
  padding: 0;     /* This is not necessary */
  float: left;
}

小提琴：http://output.jsbin.com/daruzepiqa/1

Answer 2

这是因为display:inline-block在html中创建了空格......

您可以将display:inline-block更改为float:left

请参阅https://jsfiddle.net/z0cc6fp7/1/

Answer 3

您可以float使用divs而不是使用inline-block来获得您想要的效果。

      html, body
      {
        margin: 0;
        padding: 0;
        width: 100%;
      }
      .row
      {
        width: 100%;
        margin: 0;
        padding: 0;  
      }
      .col-1
      {
        width: 10%;
        margin: 0;
        padding: 0;
        float: left;
      }

  <body>
    <div class="row">
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
      <div class="col-1">Some text</div>
    </div>
  </body>

为什么html页面不适合100％？

3 个答案: