11

左侧菜单中的每个链接都有padding-left: 15px;其原因，因此我可以添加背景图像（蓝色箭头）。

但是现在，当文本换行时（请参阅“绘画、版画和水彩画”），它会忽略填充。

搜了一圈后，我根本找不到任何类似的案例，是不是因为我做错了？

如果我目前所拥有的一切都很好，我该如何解决包装问题？

4

4 回答 4

32

填充仅适用于块级元素。分配您的菜单a元素 adisplay:block;或display:inline-block;让它们正确响应填充。

于 2012-05-15T13:51:41.783 回答
1

您应该将填充放在 div 上 - http://jsfiddle.net/qHGrJ/1/

填充不适用于 span 样式元素。或者，您可以在链接上使用 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 添加到您的锚点。我建议不要使用 inline-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 回答