0

试图使我的网页尽可能响应，但我的导航栏有问题。我希望将徽标和导航包含在容器的大小中，但导航栏不会延伸到容器的整个宽度，否则会溢出。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Win Or Go Home</title>
    <link rel="stylesheet" type="text/css" href="../css/nav.css" />
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="blueline">
    </div>
    <div class="container">
        <div id="logo"><img src="../images/image1.jpg" /></div>
        <nav>
            <ul>
                <li><a href="" target="_self"><strong>ITEM 1</strong></a></li>
                <li><a href="" target="_self"><strong>ITEM 2</strong></a></li>
                <li><a href="" target="_self"><strong>ITEM 3</strong></a></li>
                <li><a href="" target="_self"><strong>ITEM 4</strong></a></li>
                <li><a href="" target="_self"><strong>ITEM 5</strong></a></li>
                <li><a class="blue" href="" target="_self"><strong>SPORTS</strong></a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

@font-face {
    font-family: "Nevis";
    src: url(http://www.beatthatfordrums.com/win/extras/fonts/nevis.ttf) format("truetype");
}
body {
    background-color:#F4F4F4;
    margin:0 auto;
    padding-top:0.5%;
}
#blueline {
    background-color:#0086be;
    height:57px;
    width:20%;
    float:left;
}
.container {
    width:60%;
    max-width:2570px;
    min-width:700px;
    padding: 0;
    margin: 0 auto;
    background-color:#FFFFFF;
}
#logo {
    width:5%;
    height:57px;
    float:left;
    padding:0;
}
nav {
    margin: 0 auto;
    padding:0;
    width:100%;
    text-align:center;
    height:57px;
}
ul {
    margin: 0px 20px;
}
ul li {
    float:left;
    list-style-type:none;
}
ul li a {
    background: #FFFFFF;
    color:#767676;
    display: block;
    font-family: "Nevis", Helvetica, sans-serif;
    padding: 20px 57px 20px;
    text-decoration: none;
    border-right: 1px solid #F4F4F4;
}
ul li a:hover {
    background:#f0f8fb;
    color: #0086be;
}
ul li a.blue:hover {
    background:#f0f8fb;
    color: #0086be;
}
ul li a.blue {
    background:#0086BE;
    color:#FFFFFF;
}
4

1 回答 1

0

我不完全确定您要实现的目标，但是从我收集的信息来看，您的问题是您希望导航项目是流动的，但您实际上已经使用 rule 为它们提供了静态尺寸ul li a { padding: 20px 57px 20px; }。

如果您希望您的元素填充可用空间而不溢出，您可以以百分比为单位指定它们的宽度。（并确保这些宽度加起来是父级的 100%（例如，我看到#logo和nav是兄弟姐妹，但 logo 的宽度为 5%，nav 的宽度为 100% - 加起来高达 105%父母----这可能会惹恼你----））

您还可以考虑一些其他策略，例如缩小字体大小或在较小宽度处减少填充。

于 2013-07-23T02:24:57.620 回答