1

目标：我希望菜单项彼此占用相同的空间。拉伸显示空间时，我不希望菜单项折叠到自己的行。相反，我希望他们越来越靠近。

尝试1：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        width: 100%;
        background: #333;
        display: table;
    }
    #navigation ul{
        margin:0px auto;
        padding: 0 0 0 0;
        display: table-row;

    }
    #navigation li{
        list-style-type: none;
        display: inline;
        display: table-cell;
    }
    #navigation li a{
        float: left;
        /*padding: 5px 10.2%;*/
        padding: 5px;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
    }
    #navigation li a:hover{ 
        background: #1C5EC2; 
    }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

尽管这些项目都水平放置在一起，但它们的间距并不相等。此外，突出显示它们不会像我想要的那样遮蔽那么宽的区域。

尝试2：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        float: left;
        width: 100%;
        background: #333;
    }
    #navigation ul{
        margin: 0;
        padding: 0;
    }
    #navigation ul li{
        list-style-type: none;
        display: inline;
    }
    #navigation li a{
        display: inline;
        float: left;
        padding: 5px 10.3%;
        color: #FFFFFF;
        text-decoration: none;
    }
    #navigation li a:hover { background: #1C5EC2; }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

这个例子几乎正是我想要的。关于这一点的一切都是正确的，除了将显示尺寸拉伸得更小会将菜单项放在其他项目下方的一行上。

我怎样才能采取第一次尝试的非包装行为，并将其应用于我的第二次尝试？我的目标是有一个不包装菜单项的第二次尝试的工作实现。

*注意：我涉及到单独的 CSS 文件和 html，但我只包含了我认为解决问题所需的内容。谢谢你。

4

2 回答 2

3

在这里 - 我做了一个小提琴。这是你想要的？ 关联

我已经更改了您的li和a元素的 CSS：

#navigation ul li {

    list-style-type: none;
    float: left;
    width: 25%;    
    text-align: center;
}


#navigation li a {

    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 0px;
    display: block;    
}
于 2012-11-05T18:34:26.010 回答
1

感谢oksushi，这将无需设置宽度且末尾没有额外空间即可完成：

http://jsfiddle.net/VBcUM/

HTML

<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
  <li><a href="#">Consectetur</a></li>
  <li><a href="#">Adipiscing</a></li>
</ul>

CSS

ul {
  padding: 0;
  display: table;
  width: 100%;
  table-layout: fixed;
}
li {
  display: table-cell;
}
a {
  display: block;
  padding: 1em;
  text-align: center;
  background: white;
}
a:hover {
  background: lime;
}
于 2013-07-31T05:05:02.427 回答