Why html page isn't fit to 100%?

后端未结

关注

 3  1562

Whenever i want to make a html page i have problem with this, why html page is less than 100%? Let me explain in example:

相关标签:

3条回答

盖世英雄少女心

2021-01-23 07:10

You can float the divs instead of using inline-block to get the effect you want.

      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>

0 讨论(0)

爱一瞬间的悲伤

2021-01-23 07:14

It is because display:inline-block creates white-space in the html...

you could change the display:inline-block to float:left

see https://jsfiddle.net/z0cc6fp7/1/

0 讨论(0)
发布评论:

提交评论
- 加载中...

南方客

2021-01-23 07:23

When you give display: inline-block; it generates spaces in-between them. Use the same code this way:

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

Fiddle: http://output.jsbin.com/xorahifipe

You can also use float: left, but you need to give overflow: hidden; to the parent, or clear it somehow. With your original example, float works this way:

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

Fiddle: http://output.jsbin.com/daruzepiqa/1

0 讨论(0)

热议问题