11

左側のメニューの各リンクにはpadding-left: 15px;、背景画像（青い矢印）を追加できるようにするための理由があります。

しかし、現在、テキストが折り返されると（「絵画、版画、水彩画」を参照）、パディングは無視されます。

周りを検索したところ、似たようなケースはまったく見つかりませんでしたが、これは間違っているためですか？

私が現在持っているものに問題がない場合、どうすればラッピングの問題を修正できますか？

4

4 に答える 4

32

パディングはブロックレベルの要素にのみ適用されます。aメニューの要素にaを割り当てるか、display:block;パディングdisplay:inline-block;に適切に応答するようにします。

于 2012-05-15T13:51:41.783 に答える
1

代わりにdivにパディングを配置する必要があります-http://jsfiddle.net/qHGrJ/1/

スパンスタイル要素の場合、パディングはそのようには機能しません。または、リンクでdisplay：blockを使用することもできます。

于 2012-05-15T13:53:27.147 に答える
0

これらのアンカーの使用方法を考えると、これらをに設定するだけですdisplay:block。

このメニューをマークアップするためのより理想的な方法は（特にHTML5を使用しているため）menu、リンクのリストを含むタグを使用することです。

<menu>
 <ul>
  <li><a href="myMenuItem.html">My Menu Item</a></li>
  <li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>

これはよりセマンティックでありli、マージンを追加するためのフックとしての'も提供します。

于 2012-05-15T13:52:47.213 に答える
0

display：blockをアンカーに追加します。クロスブラウザは完全にはサポートされていないため、インラインブロックの使用はお勧めしません（IE7以下を信じています）。

このようにview.cssの13行目に表示ブロックを追加します

#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}
于 2012-05-15T13:52:47.757 に答える