Question

我创建了一个导航栏，我希望100％完成。

这是我的HTML代码，以便更清晰

<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">

<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />


<ul id="nav" >
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
</head>

然而，尽管放宽：100％;它仍然保持不变。

enter image description here

我希望我的所有5个选择都能集中在一起并且像这样均匀分配。但是，如果我的宽度不是100％，我甚至无法做到。

enter image description here

这是我的导航栏的CSS

#nav {
 position:absolute;
 left:0%;
 top:0%;
 margin: 0px; 
 padding: 0;
 border: 1px yellow;
 border-bottom: none;
 width:100%;
}

#nav li a, #nav li {
 text-align: center;
    float: left;
}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: #5FFB17;
 background: #292929;
 background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
 border-right: 1px solid #3c3c3c;
 border-left: 1px solid #292929;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}

#nav li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

我也尝试将#navarbar的位置更改为亲戚。但是，导航栏的左侧，顶部位置不会像我的代码所写的那样是0％。我真的看不到任何让我的导航栏变得100％的东西。

enter image description here

我还尝试将导航栏嵌套在不同的CSS属性中，宽度也为100％

<div id="navbarwidth">
<ul id="nav" >
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
</div>

CSS

#navbarwidth {
width:100%;
position:absolute;
}

Answer 1

正如icktoofay所说，你的#nav元素占据了整个宽度，但是其中的元素向左浮动，导航没有背景，所以它看起来不是。这是一个修正：

http://jsfiddle.net/DgceP/

移除li和a元素上的浮动并将其设置为display: inline-block

将背景渐变移至#nav

在text-align: center

上设置#navbarwidth

在li元素上设置最小宽度，使它们具有相似的宽度（非常长）

如果您不希望菜单在小屏幕上换行，请在#navbarwidth或#nav上设置最小宽度

#navbarwidth {
    width:100%;
    position:absolute;
    text-align: center;
}
#nav {
    background: #292929;
    background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
    position:absolute;
    left:0%;
    top:0%;
    margin: 0px;
    padding: 0;
    border: 1px yellow;
    border-bottom: none;
    width:100%;
}
#nav li a, #nav li {
    text-align: center;
    display: inline-block;
    min-width: 70px;
}
#nav li {
    list-style: none;
}
#nav li a {
    padding: 1em 2em;
    text-decoration: none;
    color: #5FFB17;
    border-right: 1px solid #3c3c3c;
    border-left: 1px solid #292929;
    border-bottom: 1px solid #232323;
    border-top: 1px solid #545454;
}
#nav li a:hover {
    background: #2a0d65;
    background: -moz-linear-gradient(top, #11032e, #2a0d65);
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

Answer 2

问题很可能是因为您的导航栏位于宽度有限的div内。因此，将导航栏宽度设置为100％只会让它填充它所在的div（而不是整个页面）。

如果确实如此，只需将导航栏从父div中取出或以某种方式调整父div。（即使其居中，或使其宽度更大）

Answer 3

您的导航栏占用了所有水平空间 - 就是这样

它没有高度;和
您尚未应用背景来查看。

这些问题有相当明显的解决方案：

将明确的高度应用于导航栏及其元素。
申请背景。

项目仍然不会居中，因为您正在进行float: left，但这是一个不同的问题。

尽管宽度为100％，为什么我的导航条不会达到100％

3 个答案: