我有一個導航菜單，似乎不能添加空格(margin:3px；)之間的& lt李& gt元素。

你可以在這個jsfiddle或者下面看到HTML和CSS代碼。

你會看到我添加了一個底部邊框:2px solid # fff到#access li來模擬元素之間的空間，但這是行不通的，因為在導航菜單下我會有一堆不同的顏色。如果我添加了margin-button: 2px，它就不起作用了。

這是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>

這是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;
}

更新2021

我最初的回答來自2012年，當時許多3級CSS選擇器還不存在。為了實現這一點，我們需要JS或其他顯式CSS樣式/類來實現它。正如@AlphaX所指出的，現在最好的解決方案很簡單

li.menu-item:not(:last-child) { 
   margin-bottom: 3px;  
}

舊答案

添加:

margin: 0 0 3px 0;

到你的#訪問李和移動

background: #0f84e8; /* Show a solid color for older browsers */

到#access a，取出邊框-底部。那么它會起作用

這里:http://jsfiddle.net/bpmKW/4/

您可以使用margin屬性:

li.menu-item {
   margin:0 0 10px 0;   
}

演示:http://jsfiddle.net/UAXyd/

flex有一個強大的特性，它允許指定每個子項之間的間距，而不必引用& quot最后一個孩子& quot穿過縫隙。在這一點上，我發現自己使用的次數比保證金還多:

ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

例子

li {
  background: red;
}

ul {
  background: silver;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

因為您要求在之間留出空間，所以我將在最后一項中添加一個覆蓋項，以消除那里的額外空白:

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>

此處的大多數答案都不正確，因為它們會在最后一個答案上添加底部空格& lt李& gt所以他們不只是在中間增加空間& lt李& gt！

最準確和有效的解決方案如下:

li.menu-item:not(:last-child) { 
   margin-bottom: 3px;  
}

解釋: 通過使用:not(:last-child)，該樣式將應用于所有項目(li.menu-item ),但最后一個項目除外。

簡單快捷。只需將css放入ul元素中(gap屬性定義li元素之間的間距):

display: flex;
align-items: flex-start;
flex-direction: column;
gap: 40px;

我看到你使用了行高，但你給了& lta & gt標記而不是& ltul & gt 試試這個:

# access ul {行高:3.333em} 那時你就不需要玩利潤游戲了。

您可以使用網格布局及其間隙屬性。與flex相比，grid節省了一行CSS代碼。

ul {
  display: grid;
  gap: 1em;
}

運行下面的代碼片段并嘗試一下！

/* base */

ul {
  background: gray;
  list-style: none;
  padding: 1em;
}

li {
  background: green;
  text-align: center;
  padding: 1em;
}


/* UL Gap Adjustment */

ul {
  display: grid;
  gap: 1em;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

我只想說伙計們:

只玩保證金

在& lt李& gt如果你玩保證金。