css - 如何在 li 标签的边框中添加边距？

Question

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

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

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

Answer 1

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

  .sf-menu li a

所以你在 class中选择<a>inside of ，你需要选择 just ，简单地说：<li>.sf-menu<li>

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

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

Answer 2

然后你需要将边框设置为li tag不在a tag

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

并且 list-style-position 也应该定义在ul tagnot ina tag

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

Answer 3

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

我把你.sf-menu和你的.sf-menuCSS 声明分开了一点......

Answer 4

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

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