0

我希望我的导航栏对于每个ul元素都具有相同的宽度。我已经尝试Width:100%过ul.navbar aand 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>
4

3 回答 3

4

将内部锚点设置为

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

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

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

于 2013-08-07T13:09:44.820 回答
1

从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。一种更防弹的方法是将它们全部浮动，但这有其自身的一系列问题。

于 2013-08-07T12:57:31.150 回答
0

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

我修改了你的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;
}
于 2013-08-07T13:13:21.350 回答