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

あなたが達成しようとしていることは完全にはわかりませんが、私が集めたものから、あなたの問題は nav アイテムをfluidにしたいのに、基本的にルールで静的な寸法を与えていることのようul li a { padding: 20px 57px 20px; }です。

要素がオーバーフローせずに利用可能なスペースを埋めたい場合は、パーセンテージで幅を指定できます。(そして、これらの幅の合計が親の 100% になるようにします (たとえば、#logoとnavは兄弟ですが、ロゴの幅は 5% で、nav の幅は 100% です。合計すると、親の 105% になります)親----これはおそらくあなたを台無しにするでしょう----))

フォントサイズを縮小したり、幅が狭い場合にパディングを減らしたりするなど、他の戦術を検討することもできます。

于 2013-07-23T02:24:57.620 に答える