Question

我想制作一排垂直居中的div。我不想使用HTML表格或CSS的表格单元格等。

第一个子div的宽度不是100％。它应该是。我不知道......

<div style="width:100%">
  <div style="clear:both;padding:2px"><!-- this is not 100% but it should be -->
    <div style="display:inline-block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to 1...

      <div style="display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>

  <div style="clear:both;padding:2px"><!-- this is not 100% but it should be -->
    <div style="display:inline-block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to 2...

      <div style="display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>
</div>

Answer 1

实际上，它是100％：

＆＃13;

<div style="width:100%">
  <div style="clear:both;padding:2px;background-color:pink"><!-- this IS 100% as it should be -->
    <div style="display:inline-block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to...

      <div style="display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

也许这就是你真正想要的东西？：

＆＃13;

<div style="width:100%">
  <div style="clear:both;padding:2px"><!-- this IS 100% as it should be -->
    <div style="display:block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to...

      <div style="display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

仔细查看您的代码，我可能会认为实际上您正在尝试实现此目的：

＆＃13;

<div style="padding:10px;background-color:#D0D5E6;">
  <div>Go to...<a style="float:right" href="goto.html">Go &raquo;</a></div>
</div>

＆＃13;

Answer 2

100％的值是父亲宽度的100％。请参阅documentation。

您需要在孩子的div上添加宽度：

＆＃13;

<div>
  <div style="clear:both;padding:2px"><!-- this is not 100% but it should be -->
    <div style="width:100%; display:inline-block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to 1...

      <div style="float: right;display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>

  <div style="clear:both;padding:2px"><!-- this is not 100% but it should be -->
    <div style="width:100%;display:inline-block;vertical-align:middle;text-align:left;background-color:#D0D5E6;border: 10px solid #D0D5E6;">
      Go to 2...

      <div style="float: right;display:inline-block;vertical-align:middle;text-align:right;">
        <a href="goto.html">Go &raquo;</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Div宽度不是可用空间的100％

2 个答案: