我应该使用或填充来分隔水平列表项

Question

我想在一些水平布局的列表项之间放一些空格，我应该使用 还是padding-left来分隔它们？

&nbsp示例：

<ul class="menu">
    <li class="menu_item">Option 1&nbsp;</li>
    <li class="menu_item">Option 2</li>
</ul>

padding-left示例：

<ul class="menu">
    <li class="menu_item">Option 1</li>
    <li class="menu_item">Option 2</li>
</ul>
.menu li.menu_item { padding-left: 10px; }

Answer 1

简单的回答。使用padding-left它更容易维护，更改并且更易于定制。如上所述，您甚至可能希望使用margin代替padding，这通常需要使用background-color来分隔项目。

我会举一个例子，给我一点时间来制作一个。

编辑：

这是一个fiddle。因为你已经知道了html和css，所以我决定只给你全屏显示。

注意背景颜色是如何与边距分开的，而不是填充或＆amp; nbsp。由于这个原因，保证金通常很有用，但有时您需要间距中的背景颜色。您可以同时使用margin和padding来获得所需的间距。

保证金的工作方式和填充不是因为箱型。有关箱型here的更多信息。

Answer 2

Padding绝对是最好的方法。 事实上，以后您可以更轻松地自定义列表...... 想象一下，您的列表中不仅有2-3个列或行，而是100个等... 拿一个像这样的清单：

  <ul class="menu">  
    <li> Option 1 </li>
    <li> Option 2 </li>
  </ul>

css部分看起来像这样：

  .menu
   { 
     //Your style..
   }
   .menu li
   {
      padding-left: 5px; //As you wants...
   } 

Answer 3

不要使用 

padding-left是正确的选择。

或者，您可以使用margin-left

在创建菜单时，我建议（根据我过去的经验）使用margin-left列表用于菜单项。提供更多的灵活性和清洁度。