html - 在表格单元格行为中 float 父级的宽度

Question

我正在尝试构建响应式导航栏。导航栏有 3 个部分，只有中间部分会在调整大小时拉伸(stretch)。

我在 header 和 display: table-cell; 上应用 display: table; 和 width:100%; code> 到子元素。 width: 1px; 和 white-space: nowrap; 被添加到 .left 和 .right 中，只占用他们需要的空间和 width: auto; 被添加到 .middle 以允许它占据剩余的宽度。有用!

问题是 .right 内部有 floated 子元素，而 .right 本身没有正确的宽度(列表应该全部排成一行)。

这是我的代码示例:

header {
  display: table;
  height: 30px;
  width: 100%;
}
.head-cell {
  display: table-cell;
  white-space: nowrap;
}
.left, .right {
  width: 1px;
}
.left {
  background-color: #2ecc71;
}
.middle {
  background-color: #9b59b6;
}
.middle input {
  width: 100%;
  border: 0;
  padding: 0;
}
.right {
  background-color: #e74c3c;
}
.right ul {
  overflow: hidden;
}
.right ul li {
  float: left;
}

<header>
  <div class="head-cell left">My super Logo</div>
  <div class="head-cell middle">
    <input type="text" />
  </div>
  <div class="head-cell right">
    <nav role='navigation'>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>  
  </div>
</header>

注意:我不想使用 inline-block 行为来破坏元素之间的幽灵空间。我想在内部使用 float 行为。

Answer 1

您将无法使用 float 实现此目的，除非您还在 ul 上设置了 width(我怀疑您会想要做):

header {
  display: table;
  height: 30px;
  width: 100%;
}
.head-cell {
  display: table-cell;
  white-space: nowrap;
}
.left, .right {
  width: 1px;
}
.left {
  background-color: #2ecc71;
}
.middle {
  background-color: #9b59b6;
}
.middle input {
  width: 100%;
  border: 0;
  padding: 0;
}
.right {
  background-color: #e74c3c;
}
.right ul {
  overflow: hidden;
  width: 260px;
}
.right ul li {
  float: left;
}

<header>
  <div class="head-cell left">My super Logo</div>
  <div class="head-cell middle">
    <input type="text" />
  </div>
  <div class="head-cell right">
    <nav role='navigation'>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>  
  </div>
</header>

这是因为 float 只有在有足够的空间容纳它们时才会将它们彼此相邻放置。

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

float ( http://www.w3.org/TR/CSS21/visuren.html#floats)

将 li 设置为 display: inline-block; 是我个人使用的方法:

header {
  display: table;
  height: 30px;
  width: 100%;
}
.head-cell {
  display: table-cell;
  white-space: nowrap;
}
.left, .right {
  width: 1px;
}
.left {
  background-color: #2ecc71;
}
.middle {
  background-color: #9b59b6;
}
.middle input {
  width: 100%;
  border: 0;
  padding: 0;
}
.right {
  background-color: #e74c3c;
}
.right ul {
  overflow: hidden;
}
.right ul li {
  display: inline-block;
}

<header>
  <div class="head-cell left">My super Logo</div>
  <div class="head-cell middle">
    <input type="text" />
  </div>
  <div class="head-cell right">
    <nav role='navigation'>
      <ul>
        <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Clients</a></li><li><a href="#">Contact Us</a></li>
      </ul>
    </nav>  
  </div>
</header>

但是，由于您特别要求不使用 inline-block 的方法，所以我会选择 flexbox:

• 将 display: flex; 添加到 .right ul。这将告诉它的 child 使用 flexbox 模型
• 由于 flex-direction 默认设置为 row，因此 li 将从左到右对齐
• flex-wrap 默认设置为 nowrap，因此 li 将保留在一行上

header {
  display: table;
  height: 30px;
  width: 100%;
}
.head-cell {
  display: table-cell;
  white-space: nowrap;
}
.left, .right {
  width: 1px;
}
.left {
  background-color: #2ecc71;
}
.middle {
  background-color: #9b59b6;
}
.middle input {
  width: 100%;
  border: 0;
  padding: 0;
}
.right {
  background-color: #e74c3c;
}
.right ul {
  display: flex;
  overflow: hidden;
  list-style-type: none;
}

<header>
  <div class="head-cell left">My super Logo</div>
  <div class="head-cell middle">
    <input type="text" />
  </div>
  <div class="head-cell right">
    <nav role='navigation'>
      <ul>
        <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Clients</a></li><li><a href="#">Contact Us</a></li>
      </ul>
    </nav>  
  </div>
</header>