Question

尝试让我的网页尽可能快速响应，但导航栏出现问题。我希望徽标和导航包含在我的容器大小中，但导航栏不会拉伸容器的整个宽度，否则它会溢出。这是我的代码：

<!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;
}

Answer 1

我不完全确定你想要实现的目标，但从我收集到的内容看起来你的问题是你希望导航项目流畅，但你基本上使用规则ul li a { padding: 20px 57px 20px; }给出静态维度。

如果您希望元素填充可用空间而不会溢出，则可以按百分比给出宽度。（并确保这些宽度合计为父级的100％（例如，我看到#logo和nav是兄弟姐妹，但徽标的宽度为5％，导航宽度为100 ％ - 加起来高达105％的父母----这可能会让你感到沮丧----））

您可能还会考虑其他一些策略，例如缩小字体大小或减小较小宽度的填充。

响应导航栏的麻烦

1 个答案: