0

項目ごとに個別の画像ではなく、各リスト項目の上に画像を使用してナビゲーションを作成しようとしています。全画面表示のときは問題ないように見えますが、リスト項目がうまく積み重なることを期待して画面を最小化すると、それらは互いに積み重なります。以下は私のコードのリストです：

#nav ul, #nav li {
list-style: none;
font-size: 1.2em;
text-transform:uppercase;
}

#nav ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background: url(images/navico.jpg) no-repeat center;
padding-top: 50px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 6px;
}

これはページへのリンクですhttp://ecoairofswfl.com/Bush2/

4

2 に答える 2

0

これを試して、

#nav ul li {
  background: url("images/navico.jpg") no-repeat scroll center center transparent;
  display: block;
  float: left;
  list-style: none outside none;
  padding: 50px 4px 0 6px;
}

それらをブロック要素に変更し、左にフロートさせました。inline はスタッキングで意図したとおりに機能しません。

于 2013-09-25T14:55:57.697 に答える
0 
Solution is
#nav ul li {
    display: inline-block;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    background: url(images/navico.jpg) no-repeat center;
    padding-top: 50px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 6px;
    }
于 2013-09-25T14:58:07.047 に答える