以表格单元格行为浮动父级的宽度

Question

我正在尝试构建一个响应式导航栏。导航栏有3个部分，只有中间部分可以调整大小。

我将Transport security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.和display: table; width:100%;和header应用于子元素。 display: table-cell;和width: 1px;已添加到white-space: nowrap;和.left以占用他们需要的空间，并.right被添加到width: auto;以允许它占据宽度的其余部分。它有效！

问题是.middle里面有.right个ed子句，float本身没有正确的宽度（列表应该都在一行中）。

这是我的代码示例：

.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行为。

Answer 1

除非您在float上设置width（我怀疑您不想这样做），否则您将无法使用ul实现此目的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是因为float只有在足够的空间适合时才会将自己彼此相邻放置。

  

如果没有足够的水平空间用于浮子，它会向下移动，直到它适合或没有更多的浮子存在。

浮动（http://www.w3.org/TR/CSS21/visuren.html#floats）

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，由于您已经明确要求使用inline-block的方法，我会转而使用flexbox：

• 将display: flex;添加到.right ul。这将告诉其孩子使用flexbox模型
• 默认情况下，flex-direction设置为row，li将从左到右对齐
默认情况下，
• flex-wrap设置为nowrap，因此li将保留在一行

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;