html - 导航表拉伸(stretch)单元格

Question

我有一个带有“ul”和“li”的导航栏“nav”。我已将“ul”设置为显示:表格，将“li”设置为显示:表格单元格。

这可确保条形图占据 wrapper 的整个宽度。但是第一个单元格应该固定为 51px。 max-width 不适用于表格并且单元格正在拉伸(stretch)。我该如何阻止它？

#navigation {
background: #FFF;
clear: both;
margin: 0 auto 20px;
min-height: 3.5em;
min-width: 960px;
position: relative;
box-shadow: inset 0 -3px 5px -2px #d9d9dd,inset 0 -3px 5px -2px #d9d9dd;
}
#navigation ul {
list-style: none;
margin: 0;
font-size: 0;
display: table;
width: 100%;
}
#navigation>ul>li {
position: relative;
vertical-align: top;
width: 181.5px;
height: 46px;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
display: table-cell;
}
#navigation>ul>li:first-child {
width: 41px;
height: 46px;
border-left: 1px solid #d2d2d2;
min-width: 51px;
}

<nav class="sort-pages modify-pages yui3-dd-drop" id="navigation">
<h1>
<span>Navigation</span>
</h1>
<ul id="aui_3_4_0_1_286">
<li class="lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop" id="aui_3_4_0_1_365">
  <a href="https://dev-afp.net/afp/web/home" tabindex="0" id="aui_3_4_0_1_306" class="active"><span> Home</span></a>
  <span class="delete-tab aui-helper-hidden">X</span>
</li>
<li aria-selected="true" class="has-child selected lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop" id="aui_3_4_0_1_388">
  <a href="https://dev-afp.net/afp/web/banking" tabindex="-1" id="aui_3_4_0_1_308"><span>Banking</span></a>
  <ul class="child-menu">
    <li>
      <a href="https://dev-afp.net/afp/web/mortgages" tabindex="-1" id="aui_3_4_0_1_310">
      <span>Mortgages</span>
      </a>
    </li>
    <li>
      <a href="https://dev-afp.net/afp/web/our-clients" tabindex="-1" id="aui_3_4_0_1_312">
      <span>Our Clients</span>
      </a>
    </li>
  </ul>
</li>
<li class="lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop" id="aui_3_4_0_1_367">
  <a href="https://dev-afp.net/afp/web/wealth-management" tabindex="-1" id="aui_3_4_0_1_314"><span id="aui_3_4_0_1_776">Wealth Management</span></a>
  <span class="delete-tab aui-helper-hidden">X</span>
</li>
<li id="aui_3_4_0_1_358" class="lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop">
  <a href="https://dev-afp.net/afp/web/commerical-banking" tabindex="-1" id="aui_3_4_0_1_316"><span id="aui_3_4_0_1_357">Commercial Banking</span></a>
  <span class="delete-tab aui-helper-hidden">X</span>
</li>
<li class="lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop" id="aui_3_4_0_1_368">
  <a href="https://dev-afp.net/afp/web/international" tabindex="-1" id="aui_3_4_0_1_318"><span>International</span></a>
  <span class="delete-tab aui-helper-hidden">X</span>
</li>
<li class="lfr-nav-deletable lfr-nav-sortable lfr-nav-updateable yui3-dd-drop" id="aui_3_4_0_1_369">
  <a href="https://dev-afp.net/afp/web/about" tabindex="-1" id="aui_3_4_0_1_320"><span>About</span></a>
  <span class="delete-tab aui-helper-hidden">X</span>
</li>

Answer 1

我会为此使用 flexbox:

1) 在容器上设置display:flex;

2) 将所有子项设置为 flex:1; - 这将使它们具有相同的宽度并填满容器

3) 在第一个元素上设置max-width

FIDDLE (调整浏览器大小以查看实际效果)

ul {
  display: flex;
  width: 80%;
  border: 1px solid red;
  padding: 0;
  list-style: none;
}
li {
  flex: 1;
  border: 1px solid green;
}
.home {
  max-width: 50px;
}

<ul>
  <li class="home">Home</li>
  <li>Some text here</li>
  <li>Some text here</li>
  <li>Some text here</li>
  <li>Some text here</li>
</ul>