为什么使用width：100％来使表相对于窗口大小进行扩展会产生不希望的空间？ [英] Why is using width:100% to make a table expand relatively to window size creates an undesired space?

问题描述

我正在尝试创建一个网站，该网站将相对于窗口大小调整表格元素表格单元格的大小，以使其始终适合窗口内部。这是我所拥有的：

I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have:

.table {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.tablecell {
  display: table-cell;
}

<div class="table">
  <div class="tablecell">
    <image src="fb.png">
  </div>
  <div class="tablecell">
    <image src="twitter.png">
  </div>
  <div class="tablecell">
    <image src="youtube.png">
  </div>
  <div class="tablecell">
    <image src="apple.png">
  </div>
  <div class="tablecell">
    <image src="email.png">
  </div>
</div>

这是怎么回事 width：100％。这是结果的图片。我用蓝色圈出了问题空间。忽略Soulja Boy的脸。

What's messing this up is the width:100%. Here's a picture of the results. I circled the problem space in blue. Ignore Soulja Boy's face.

基本上，我只是希望此居中位置正确，以便YouTube图片在页面中间。使用 width：100％创建的空间可以防止这种情况，但是我想使用此属性或类似的属性，以便表始终适合窗口。

Basically I just want this centered correctly so that the YouTube image is in the middle of the page. The space created by using width:100% prevents that, but I want to use this or a similar property so that the table will always fit inside the window.

推荐答案

我认为您只是看到了图像向左对齐的事实。尝试 text-align：center; ，如下所示：

I think you're just seeing the fact that the images are aligned to the left. Try text-align:center;, like this:

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .tablecell {
         display:table-cell;
         text-align:center;
     }

jsFiddle： http://jsfiddle.net/q73LK/

jsFiddle: http://jsfiddle.net/q73LK/

作为旁注，不需要为单元使用类。您可以改为：

As a side note, there is no need to use classes for the cells. You can do this instead:

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .table div {
         display:table-cell;
         text-align:center;
     }

作为第二注，您丢失了图片上的 alt属性。对于有效的HTML，您需要包括 alt属性。像这样：

As a second side note, you are missing "alt" attribute on your images. For valid HTML, you need to include the "alt" attribute. Like this:

<div class="table">
    <div class="tablecell"><image alt="fb" src="fb.png"/></div>
    <div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
    <div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
    <div class="tablecell"><image alt="apple" src="apple.png"/></div>
    <div class="tablecell"><image alt="email" src="email.png"/></div>
</div>

这篇关于为什么使用width：100％来使表相对于窗口大小进行扩展会产生不希望的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！