0

CSS でスタイル設定された水平ナビゲーション バーがあります。私の問題は、バーの下部にパディングがあるように見えることですが、それがどこから来ているのかわかりません。

さらに、ナビゲーション バーが非常に狭くなると (ウィンドウのサイズ変更やモバイルなど)、囲んでいる div からはみ出します。どうすればこれを防ぐことができますか?

JSFiddle は次のとおりです。

http://jsfiddle.net/m8pWa/

CSS:

 html, body {
    margin: 0;
    padding: 0;
    background-color: #E0F2F7;
}
.header {
    margin: 0 auto;
    text-align: center;
    background-color: #81BEF7;
    padding: 1px;
    color: #FAFAFA;
}
ul {
    margin: 0;
    padding: 0;
}
.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}
.nav ul li {
    list-style-type: none;
    display: inline;
    overflow: hidden;
}
.nav li a {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
.nav li a:hover {
    background: white;
    color: #A4A4A4;
}
.nav-wrapper {
    background-color: #58ACFA;
    padding: 1px;
}
.wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
}
/* this centers the internal elements */
 .centered {
    text-align: center;
}
/* gives a main content window to the left that is 70% of the main */
 .content {
    width: 70%;
    float:left;
}
/* makes a sidebar to the right that is 30% of the main and floating right */
 .sidebar {
    width: 30%;
    float:right;
}
.sidebar ul {
    padding: 10px;
}
4

3 に答える 3

3

要素はスペースを自然に埋める必要があり、明示的な高さに依存する.navべきではありません。これによりfont-size、変更などが可能になり、子が親からオーバーフローするのを防ぐことができます。

これが解決策です：http://jsfiddle.net/m8pWa/3/

の高さを削除し.navます。

を.nav li aに変更display: block;しdisplay: inline-block;、 を削除しfloat: left;ます。

.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
}

.nav li a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
于 2013-11-09T01:20:08.767 に答える
1

padding今回は関係ありません。あなたはheight私がそれを変更した修正であなたの高さを設定しました、1.74emsそしてそれはぴったりでした.

.nav {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  height: 1.74em;
 }

画面サイズが設定された幅の場合のナビの折りたたみについては、

画面サイズが横379px程度でなければ気にする必要はありませんし、正直、モバイル端末でなければそこまで小さい画面はありません。

その場合、モバイル デバイスをサポートする必要がある場合は、 を調べてくださいmedia queries。

JSFIDDLE

于 2013-11-09T01:16:46.097 に答える