如何在 li 标签的边框中添加边距？答案

【问题标题】：How to add margin in the border of a li tag?如何在 li 标签的边框中添加边距？
【发布时间】：2013-10-24 11:59:59
【问题描述】：

我有一个菜单，我希望 li 标签有一个边框。我在我的 css 中这样做：

.sf-menu li a
    {
       list-style-position:inside;
       border: 2px solid white;
       color:#fffefe;
    }

但它有点难看。我想让它像这样工作：通过增加一些边距。我正在尝试但什么也没有，我想不出相关的标签来在谷歌上搜索。

【问题讨论】：

【解决方案1】：

首先，list-style-position 应该应用于<UL> 标签。其次，您应该将边框设置为<li>标签，并查看您的代码：

  .sf-menu li a

所以你在.sf-menu类中选择<li>里面的<a>，你只需要选择<li>，简单地说：

.sf-menu li {
   //your styles here
}

请在 jsfiddle（或任何其他平台）上做一个例子以获得进一步的帮助

【讨论】：

【解决方案2】：

那么你需要在li tag而不是a tag上设置边框

.sf-menu li
    {
       border: 2px solid white;
    }

列表样式位置也应该在ul tag而不是a tag中定义

.sf-menu
    {
       list-style-position:inside;
    }

【讨论】：

【解决方案3】：

试试这个 jsFiddle。我想这就是你所追求的：http://jsfiddle.net/nnLjK/3/

我将您的 .sf-menu 和您的 .sf-menu CSS 声明分开了一点...

【讨论】：

【解决方案4】：

这也有效。不过，我也想找到其他解决方案。

.sf-menu li a
{
     list-style-position:inside;
     border: 2px solid white;
     border-radius: 8px;
     color:#fffefe;
     padding:8px;
}

【讨论】：