0

ブラウザを縮小すると、ヘッダーとナビゲーション バーがブラウザの最後まで伸びません。ブラウザを縮小するとこんな感じ。ヘッダーとナビゲーション バーをブラウザーの最後まで拡張したい。 収縮時

ブラウザが伸びても大丈夫！ ブラウザ展開時

これが私のhtmlコードです:

<body>

<div id="header">
Some text
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>

そのための CSS は次のとおりです。

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 100px;
     background: black;
     height:54px;
}

#nav li {
     float: left;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     margin-right: 94px;
     text-decoration: none;
}

私が間違っていることを教えていただければ、本当にありがたいです。Eric Meyer のリセットも使用しています。

4

3 に答える 3

3

これを試して

#header{
    margin:0;
    background: white;
    height:90px;
    min-width:960px;
    width:100%;
}

ここで指定できますmin-width:--;

于 2013-02-16T05:02:26.240 に答える
2

次のように、パーセンテージ間隔でリストの css を更新します。

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 10%;
     background: black;
     height:54px;
}

#nav li {
     float: left;
    padding-right:9%;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     text-decoration: none;
    display:block
}

ここにデモがあります：http://jsfiddle.net/vYgs5/

于 2013-02-16T05:06:24.373 に答える
1

代わりにウェブサイトをレスポンシブにすることをお勧めします。@Naveen の回答はとても役に立ちますが、次のようなすべてのデバイスのレスポンシブ CSS スタイルを編集することを覚えておいてください。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
于 2013-02-16T06:01:45.410 に答える