如何使所有列表项的宽度相等？

Question

我希望每个ul元素的导航栏宽度均相等。 我已经尝试了ul.navbar a和ul.navbar li Width:100% 。 JSfiddle： http : //jsfiddle.net/HeyItsProdigy/a2zVr/

CSS：

@charset "utf-8";
/* Elements */

body {
    margin:0;
    padding:0;
    background-image:url(main%20bg.jpg)
}

ul {
    padding:0;
    margin:0;
}

/* End of elements */




/* Id's */

#container {
    margin-left:auto;
    margin-right:auto;
    width:1000px;
}

#body {
    border:5px solid #CF0;
    width:1000px;
    height:1000px;
    background-image:url(middle%20bg.png);
}

#navbar {
    position:relative;
    top:12px;
    text-align:center
}

/* End of is's */




/* Classes */

.navbar {
    list-style:none;
}

ul.navbar li {
    display:inline;
    margin:0;
    padding:0px;
    text-align:center;
}

ul.navbar a {
    background-color:#00CCFF;
    padding:10px;
    margin:0px;
    text-decoration:none;
    color:#CF0;
    border-radius:100px;
    border:2px solid white;
}

ul.navbar a:hover {
    background-color:#00FFFF;
    padding:10px;
    margin:0px;
}

/* End of classes */

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>

<script>
<!--



//-->
</script>

</head>

<body>
<div id="container">
    <div id="body">
        <div id="navbar">
            <ul class="navbar">
                <li><a href="index.html">Blog</a></li><li><a href="index.html">Photos</a></li><li><a href="index.html">Home</a></li><li><a href="index.html">Videos</a></li><li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

将内部锚设置为

ul.navbar a {
    display: inline-block;
    width: 80px;
}

为内容设置足够长的宽度。

http://jsfiddle.net/vrFx7/1/

Answer 2

从<li>删除display:inline 。 这导致它像内联元素一样工作（例如<a> ， <span>等）。

顺便说一句， <li>上的width:100%不起作用的原因是内联元素不能采用宽度。 如果您希望将其内联，但又要有一个宽度，则需要使用display:inline-block 。 如果要排列5个项目，则可以使用：

ul.navbar li {
  display: inline-block;
  width: 20%;
  …
}

您必须确保HTML中的列表项之间没有空格，因为当所有项目都display:inline为display:inline或display:inline-block时，列表项本身将占用空间。 一种更防弹的方法是将它们全部浮动，但这有其自身的一系列问题。

Answer 3

我对你的提琴没有什么改变。 你可以在这里找到它。 希望这可能是您的问题的答案。

我已经修改了您的CSS，如下所示：

ul.navbar li {
    display:inline;
    margin:0;
    padding:0px;
    text-align:center;
    padding: 10px;
}
ul.navbar a {
    background-color:#00CCFF;
    border-radius:100px;
    margin: 0 10px;
    min-width: 75px;
    padding:10px;
    float:left;
    text-decoration:none;
    color:#CF0;
    display:block;
}

如何使所有列表项的宽度相等？

问题描述

3 个解决方案

解决方案1
4 已采纳 2013-08-07 13:09:44

解决方案2
1 2013-08-07 12:57:31

解决方案3
0 2013-08-07 13:13:21

如何使所有列表项的宽度相等？

问题描述

3 个解决方案

解决方案1 4 已采纳 2013-08-07 13:09:44

解决方案2 1 2013-08-07 12:57:31

解决方案3 0 2013-08-07 13:13:21

解决方案1
4 已采纳 2013-08-07 13:09:44

解决方案2
1 2013-08-07 12:57:31

解决方案3
0 2013-08-07 13:13:21