2

ナビゲーション バーの上下にルールを追加するにはどうすればよいですか? HR タグを試してみましたが、ナビゲーション バーの周りに多くのスペースができたようです。これが私のhtmlで、これが私がやりたい方法の例です。

http://matthewtbrown.com/jeffandcricketquilt/

http://matthewtbrown.com/jeffandcricketquilt/rule.png

4

6 に答える 6

1

HTML をまったく変更したくない場合は、これを CSS に追加できます。

nav ul:before {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    bottom: 5px;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index:0;
}
nav ul {
    overflow: auto;
    position: relative;
    background-color:#000;
}
nav ul li{
    position:relative;
    z-index:10;
}

li要素から背景色を削除します（に追加したためul）

于 2013-04-21T14:48:56.323 に答える
0

この CSS をナビゲーション バーに適用してみてください。

border-top: 1px solid #eee
border-bottom: 1px solid #eee
于 2013-04-21T14:33:09.103 に答える
0

ボーダーとパディングを使用する:

* {
    margin: 0;
    padding: 0;
}

nav {
    text-align: center;
    background: black;
    color: white;
    padding: .2em;
}

ul {
    padding: .5em;
    border: 1px solid white;
    border-left: none;
    border-right: none;
}



nav li {
    display: inline;
    list-style-type: none;
    padding: 0 2em;
}

デモ

于 2013-04-21T14:36:03.157 に答える
0

ul タグにアウトラインを適用するので、css は次のようになります。

nav ul{
  outline-color: white;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: -7px;
  height: 60px;
  width: 848px;
}
于 2013-04-21T14:38:26.847 に答える
0

最も簡単な方法は、nav 要素にパディングを追加することです。4px は、li 要素の幅に適しています。float: left も追加

今度は、ul 要素に border-top と border-bottom を追加します。フロートを追加: ここも左にします。これにより、幅が固定されているため、li 要素が切り替わります。それらの幅を 210px に下げると、うまくいくはずです。

コードへの CSS の追加:

nav {
  padding: 4px
  float: left;
}

nav ul {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  float: left;
}

nav li {
  width: 210px;
}
于 2013-04-21T14:38:34.800 に答える