使用padding-left时，文本将无法正确换行

Question

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

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

在搜索之后我找不到任何类似的案例，那是因为我错了吗？

如果我现在的情况很好，我该如何解决包装问题？

Answer 1

填充仅适用于块级元素。将菜单的a元素分配为display:block;或display:inline-block;，以使其对填充做出正确回应。

Answer 2

您应该将填充放在div上，而不是http://jsfiddle.net/qHGrJ/1/

填充对于span样式元素不起作用。或者，您可以在链接上使用display：block。

Answer 3

鉴于您使用这些锚点的方式，您只需将它们设置为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提供了添加边距的钩子。

Answer 4

向你的主播添加display：block。我建议不要使用内联块，因为它不支持跨浏览器（我相信IE7及以下版本）。

在view.css的第13行添加显示块，如此

#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}