导航表拉伸细胞

Question

我有一个导航栏＆＃34; nav＆＃34;用＆＃34; ul＆＃34;和＆＃34; li＆＃34;。我已经设置了＆＃34; ul＆＃34;显示：table和＆＃34; li＆＃34;要显示：table-cell。

这可确保条形占据包装纸的整个宽度。但是第一个单元应该是固定的51px。 max-width不适用于表格，单元格正在拉伸。我怎么能阻止这个？

#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 （调整浏览器大小以查看此操作）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;