CSS 在 <li> 元素之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11903773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add space between <li> elements
提问by George Grigorita
I have a nav-menu on which it seems that I can't add a space (margin: 3px;) between the <li>elements.
我有一个导航菜单，似乎无法margin: 3px;在<li>元素之间添加空格 ( ) 。
You can see the HTML and CSS code on this jsfiddleor below.
你可以在这个jsfiddle或下面看到 HTML 和 CSS 代码。
You will see that I've added a border-bottom: 2px solid #fff;to the #access lito simulate the space between elements, but that is not going to work because under the nav-menu I will have a bunch of different colors. If I add margin-button: 2pxit doesn't work.
你会看到我在 中添加了一个border-bottom: 2px solid #fff;来#access li模拟元素之间的空间，但这不会起作用，因为在导航菜单下我会有一堆不同的颜色。如果我添加margin-button: 2px它不起作用。
This is the HTML:
这是 HTML：
<nav id="access" role="navigation">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
<a href="http://localhost:8888/fullstream/?page_id=5">About Us</a>
</li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
<a href="http://localhost:8888/fullstream/?page_id=7">Services</a>
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
<a href="http://localhost:8888/fullstream/?page_id=9">Environmental Surface Cleaning</a>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
<a href="http://localhost:8888/fullstream/?page_id=11">Regulations</a>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
<a href="http://localhost:8888/fullstream/?page_id=13">Contact Us</a>
</li>
</ul>
</div>
This is the CSS:
这是CSS：
#access {
background: #0f84e8; /* Show a solid color for older browsers */
display: block;
margin: 0 auto 6px 55px;
position: absolute;
top: 100px;
z-index: 9999;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
position: relative;
padding-left: 11px;
}
#access a {
border-bottom: 2px solid #fff;
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 10px 0 20px;
text-decoration: none;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
回答by Matt Hintzke
add:
添加：
margin: 0 0 3px 0;
to your #access liand move
到你#access li和移动
background: #0f84e8; /* Show a solid color for older browsers */
to the #access aand take out the border-bottom. Then it will work
到#access a并取出border-bottom. 然后它会工作
Here:http://jsfiddle.net/bpmKW/4/
在这里：http : //jsfiddle.net/bpmKW/4/
回答by RobB
You can use the marginproperty:
您可以使用该margin属性：
li.menu-item {
margin:0 0 10px 0;
}
回答by Vegar
Since you are asking for space between, I would add an override to the last item to get rid of the extra margin there:
既然您要求space between，我将在最后一项中添加一个覆盖以消除那里的额外边距：
li {
background: red;
margin-bottom: 40px;
}
li:last-child {
margin-bottom: 0px;
}
ul {
background: silver;
padding: 1px;
padding-left: 40px;
}<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>The result of it might not be visual at all times, because of margin-collapsingand stuff... in the example snippets I've included, I've added a small 1px paddingto the ul-element to prevent the collapsing. Try removing the li:last-child-rule, and you'll see that the last item now extends the size of the ul-element.
由于边距折叠和其他东西，它的结果可能并不总是可视化的……在我包含的示例片段中，我1px padding在 -ul元素中添加了一个小元素以防止折叠。尝试删除li:last-child-rule，您将看到最后一项现在扩展了ul-element的大小。
回答by Kleo M. Zane
I just want to say guys:
我只想对大家说：
Only Play With Margin
只玩保证金
It is a lot easier to add space between <li>if you play with margin.
<li>如果您使用边距，在两者之间添加空间会容易得多。
回答by Gen1n
#access a {
border-bottom: 2px solid #fff;
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 10px 0 20px;
text-decoration: none;
}
I see that you had used line-height but you gave it to <a>tag instead of <ul>Try this:
我看到你使用了 line-height 但你把它给了<a>标签而不是<ul>试试这个：
#access ul {line-height:3.333em;}
You wouldn't need to play with margins then.
#access ul {line-height:3.333em;}
那时你就不需要使用边距了。
