導航菜單邊距

Question

我在學習CSS/HTML，並且在創建導航時遇到問題。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

M-M間爲保證金。我不想要它。我試圖刪除它們，但沒有。之間

保證金M的

如何刪除呢？

Answer 1

我認爲你需要這樣的東西。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    padding: 15px 0; 
 

 
    display: inline-block; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    padding: 15px 20px; 
 

 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

Answer 2

閱讀在CBroe發佈的鏈接...給出的細節會爲您提供解決方案。在我看來，「flexbox」和「負邊距」解決方案都是非常好的技巧。

在這裏你去：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin-right: -4px; /* negative margin */ 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>