导航菜单边距

我在学习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的

如何删除呢？

来源

2017-10-12 Spc

您在'li'元素 – j08691

填充设置填充：15px的20像素;线路导致它 – schylake

这不是一个实际的'保证金'。去阅读https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – CBroe

我认为你需要这样的东西。

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>

来源

2017-10-12 16:50:46 Duoxx

阅读在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>

来源

2017-10-12 16:57:45 ArabianMaiden

导航菜单边距

回答

相关问题