Question

我希望每个ul元素的导航栏宽度相等。我已经为Width:100%和ul.navbar a尝试了ul.navbar li。 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

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

顺便说一下，width:100%上的<li>无效的原因是内联元素不能占用宽度。如果您想要内联但也有宽度，则需要使用display:inline-block。如果您希望5个项目排成一行，那么您可以使用：

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

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

Answer 3

我对你的小提琴做了一些改动。你可以找到它here。希望这可能是你问题的答案。

我修改了你的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 个答案: