使用表时导航不均匀间距

Question

我正在玩显示器：table / display：用于导航菜单的table-cell而且我遇到了问题。基本上我希望每个项目在UL的给定长度内均匀分布。

我不确定我错过了什么，但它似乎将大部分空间放到了第一个列表元素中。

我错过了什么？

HTML：

<div id="container">
    <div id="fixedWidth">
        <div id="logoAndLinks">
            <div id="tapMatesLogo">
                <p>Tapemates.</p>
            </div>
            <ul>
                <li>Work</li>
                <li>Story</li>
                <li>Contact</li>
                <li>Blog</li>
            </ul>   
        </div><!-- logo and links -->
    </div>
</div><!--end container -->

CSS：

*
{
  margin: 0;
  padding: 0;
}

#container
{
  height: 1100px;
  width: 100%;
  display: block;
  background: white;
  border: 1px solid black;
}

#fixedWidth
{
  height: 1100px;
  width: 1100px;
  display: block;
  margin-top: 103px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
}

#logoAndLinks
{
  border: 1px solid black;
  display: block;
  width: 1060px;
  height: 60px;
  margin-left: 20px;
}

#tapMatesLogo
{
  display: block;
  float: left;
  height: 56px;
  width: 220px;
  line-height:58px;
  //border: 1px solid #ccc;
}

#tapMatesLogo p
{
  color: #7933AE;
  font-family: CenturyGothic, AppleGothic, sans-serif;
  font-size: 43px;
}

ul
{
  display: table;
  //float: right;
  list-style: none;
  height: 32px;
  width: 357px;
  border: 1px solid black;
}

ul li
{
  border: 1px solid black;
  //float: left;
  display: table-cell;
  //padding-right:30px;
  width: 100%;
  font-size: 22px;
  line-height: 30px;
  font-family: CenturyGothic, AppleGothic, sans-serif; 
}

Answer 1

宽度为li 25％

*
{
margin: 0;
padding: 0;
}

#container
{
height: 1100px;
width: 100%;
display: block;
background: white;
border: 1px solid black;
}

#fixedWidth
{
height: 1100px;
width: 1100px;
display: block;
margin-top: 103px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}

#logoAndLinks
{
border: 1px solid black;
display: block;
width: 1060px;
height: 60px;
margin-left: 20px;
}


#tapMatesLogo
{
display: block;
float: left;
height: 56px;
width: 220px;
line-height:58px;
//border: 1px solid #ccc;
}

#tapMatesLogo p
{
color: #7933AE;
font-family: CenturyGothic, AppleGothic, sans-serif;
font-size: 43px;
}


ul
{
display: table;
//float: right;
list-style: none;
height: 32px;
width: 357px;
border: 1px solid black;
}

ul li
{
border: 1px solid black;
//float: left;
display: table-cell;
//padding-right:30px;
width: 25%;
font-size: 22px;
line-height: 30px;
font-family: CenturyGothic, AppleGothic, sans-serif;

}

<div id="container">

<div id="fixedWidth">
    <div id="logoAndLinks">
        <div id="tapMatesLogo">
            <p>Tapemates.</p>
        </div>

        <ul>
            <li>Work</li>
            <li>Story</li>
            <li>Contact</li>
            <li>Blog</li>
        </ul>   

    </div><!-- logo and links -->

</div>


</div><!--end container -->

Answer 2

尝试将table-layout: fixed添加到ul元素

https://jsfiddle.net/2ewov2qu/