gpt4 book ai didi

css - 如何删除 css 菜单上按钮之间的空格

转载 作者:技术小花猫 更新时间:2023-10-29 11:39:11 27 4
gpt4 key购买 nike

我是 css 和 html5 的新手,正在尝试让我的菜单栏正常工作。它是一个带有下拉功能的水平菜单栏。在我将菜单栏居中之前,导航按钮和下拉按钮之间没有空格。将其居中后,它们之间现在有一个空间,这很烦人,因为当你在它们之间移动时,更多的是在下拉菜单上,你会因为空间而失去下拉菜单。因此,我试图删除按钮之间的空间(不是边框)。非常感谢您的帮助,这里是代码:

CSS

  /* START NAV MENU */

nav {
background-color:#333333;
height:40px;
width:100%;
}


nav ul {
font-family: Sonoma, Arial;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}

nav ul li {
display: inline-block;
position: relative;

}

nav li ul {
display: none;
}

nav ul li a {
display: inline-block;
text-decoration: none;
background: #666666;
color: #ffffff;
padding: 5px 20px 3px 15px;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
border-right: 3px solid black;
border-left: 3px solid black;

}

nav ul li a:hover {
background: #999999;
}

nav li:hover ul {
display: block;
position: absolute;
height:30px;
}

nav li:hover li {
float: none;
font-size: 11px;

}

nav li:hover a {
background: #534635;
height:30px; /* Height of lower-level nav items is shorter than main level */
}

nav li:hover li a:hover {
background: #999999;
}

nav ul li ul li a {
text-align:left;
}

/* END NAV MENU */

导航的 HTML:

  <nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a>
<ul>
<li><a href="/crew">Our Crew</a></li>
<li><a href="/history">History</a></li>
<li><a href="/vision">Vision</a></li>
</ul>
</li>
<li><a href="/products">Services</a>
<ul>
<li><a href="/carpentry">Carpentry</a></li>
<li><a href="/waterproof">Waterproofing</a></li>
<li><a href="/concrete">Concrete</a></li>
<li><a href="/masonry">Masonry</a></li>
<li><a href="/prop">Property Maintenance</a></li>
<li><a href="/metal">Metal Construction</a></li>
<li><a href="/design">Interior Design</a></li>
<li><a href="/demo">Demo & Salvage</a></li>
</ul>
</li>
<li><a href="/services">Portfolio</a>
</li>
<li><a href="/contact">Contact</a>
<ul>
<li><a href="/email">Via Email</a></li>
<li><a href="/contact_form">Web Form</a></li>
<li><a href="/pigeon">Carrier Pigeon</a></li>
</ul>
</li>
</ul>
</nav>

如果您能解释一下发生了什么变化以及为什么会发生变化,我将不胜感激,谢谢!

最佳答案

float 确实是一种选择,但您还有其他选择可能更可取,因为它们允许您保留内联 block 样式及其相关优势。

Chris Coyier 的文章 Fighting the Space Between Inline Block Elements http://css-tricks.com/fighting-the-space-between-inline-block-elements/详细说明每一个,但总而言之,这是由您关闭 </li> 之间的空白引起的和下一个 <li> .

您的选择如下:

去掉结尾</li>来自每个列表项。

<li><a href="/crew">Our Crew</a>
<li><a href="/history">History</a>
<li><a href="/vision">Vision</a>

它是有效的 HTML5,不会破坏任何东西。

删除空白区域,这样您的列表标记几乎全部在一行上

<li><a href="/crew">Our Crew</a></li><li><a href="/history">History</a></li>
<li><a href="/vision">Vision</a>

注释掉空格

<li><a href="/crew">Our Crew</a></li><!--
--><li><a href="/history">History</a></li><!--
--><li><a href="/vision">Vision</a></li>

设置父级字体大小为0

ul {
font-size: 0;
}

设置负右边距以缩小差距

a {
margin-right: -4px;
}

我个人更喜欢删除结束标记,因为其他标记看起来太乱,而且 font-size: 0 在使用相对大小时效果不佳,但这取决于您,它们各有千秋。

关于css - 如何删除 css 菜单上按钮之间的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14486463/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com