1

4つの画像があり、それぞれの下にテキストリンクがあるnavbavを作成しようとしています。画像とリンクの各ペアは、独自のリストアイテムに含まれています。

ただし、現在、一致するテキストは各画像の右側にあります。各画像の下でテキストを中央揃えにしたいのですが（おそらく左揃えです。何が最もよく見えるかによって異なります）、現時点ではテキストを次の行に配置することすらできません。私はfloatと、すべての画像が左（すべてのテキストリンクの左側）に浮かぶ、またはその逆の組み合わせをいくつか試しました。

これを行う簡単な方法があると確信しています。私はそれを理解するのに苦労しています。

これが私がナビゲーションバーに使用しているCSSです：

#navbar {
width: 100%;
float: left;
background-color: #FFFFCC;
box-shadow: 5px 5px 30px #888888;
margin-bottom: 5%;
}

#navbar ul {
list-style-type: none;
margin:0;
padding:0;
} 

#navbar li {
display:inline;
padding:2.5%;
}

#navbar a {}

#navpiclist img {
height: 100px;
width: 10%;
}

ここにHTMLを追加しました：http：//jsfiddle.net/AhZzX/2/ 画像を追加する方法がわかりませんでした。その方法を理解し、追加してみます。

この問題を修正する方法について何か考えはありますか？助けてくれてありがとう！

4

2 に答える 2

2

http://jsfiddle.net/AhZzX/17/

行った変更が不明な場合は、遠慮なく質問してください。

于 2012-08-20T20:23:29.430 に答える
0

これはフロート/表示の問題です。修正は簡単です。li を display: block float: left に変更します。これにより、メニューが期待どおりに機能します。次に、display: block と text-align: center を追加します。アップデートはこちら - http://jsfiddle.net/puJcT/

Mac 上の Chrome のみでテストしていますが、これは最新のすべてのブラウザーで動作するはずです。

于 2012-08-20T20:27:54.250 に答える