无法找到删除列表项周围的空白/边框的方法
Can't Find a Way to Remove the Whitespace/ Border Around My List Items
我的导航栏变成了移动设备的下拉菜单。这是一个 CSS 菜单,但是,下拉项周围有一种白色 space 或边框。
我尝试了此处列出的所有选项:How to remove the space between list items不幸的是,这些解决方案对我不起作用。我还拆开了菜单,可以通过将#navigation a 的 margin-top 移动到 0,将背景的不透明度降低 0.05,并将列表项的高度设置为 38px 来修复一些边框。尽管如此,"border" 在某些设备上仍然令人讨厌,包括 iPhone X.
这个网站是我自己的音乐项目的网站,所以我把它放在网上,以防有帮助:http://mynameisdidi.com/
@media screen and (max-width: 695px) {
.hamburger {
display: none;
}
.hamburger.showClass {
display: block;
position: fixed;
}
nav {
position: relative;
z-index: 500;
}
ul {
float: right;
width: 100%;
transition: .45s ease-in;
margin-top: -25px;
}
li {
width: 95%;
height: 38px;
}
#navigation a {
display: block;
width: 58.5%;
margin-right: 1px;
margin-top: 0;
float: right;
background-color: rgba(255, 255, 255, 0.75);
color: #b406c7;
/*magenta*/
text-align: center;
padding: 6px;
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
}
<div class="hamburgerIcon" onclick="toggleClass()">
<h2>☰</h2>
</div>
<nav id="navigation">
<ul class="hamburger">
<li><a href="index.html">Home</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="booking.html">Booking</a></li>
</ul>
</nav>
抱歉,如果此 post 不符合 posting 标准,这是我的第一个 post。 (以后请告诉我。谢谢。)
如果您指的是 li 元素之间的空格,则会导致height: 38px;
。改(去掉)就没有间距了
![我怎么看 li 空格][1]
https://i.stack.imgur.com/v6Rhl.png
我的导航栏变成了移动设备的下拉菜单。这是一个 CSS 菜单,但是,下拉项周围有一种白色 space 或边框。
我尝试了此处列出的所有选项:How to remove the space between list items不幸的是,这些解决方案对我不起作用。我还拆开了菜单,可以通过将#navigation a 的 margin-top 移动到 0,将背景的不透明度降低 0.05,并将列表项的高度设置为 38px 来修复一些边框。尽管如此,"border" 在某些设备上仍然令人讨厌,包括 iPhone X.
这个网站是我自己的音乐项目的网站,所以我把它放在网上,以防有帮助:http://mynameisdidi.com/
@media screen and (max-width: 695px) {
.hamburger {
display: none;
}
.hamburger.showClass {
display: block;
position: fixed;
}
nav {
position: relative;
z-index: 500;
}
ul {
float: right;
width: 100%;
transition: .45s ease-in;
margin-top: -25px;
}
li {
width: 95%;
height: 38px;
}
#navigation a {
display: block;
width: 58.5%;
margin-right: 1px;
margin-top: 0;
float: right;
background-color: rgba(255, 255, 255, 0.75);
color: #b406c7;
/*magenta*/
text-align: center;
padding: 6px;
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
}
<div class="hamburgerIcon" onclick="toggleClass()">
<h2>☰</h2>
</div>
<nav id="navigation">
<ul class="hamburger">
<li><a href="index.html">Home</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="booking.html">Booking</a></li>
</ul>
</nav>
抱歉,如果此 post 不符合 posting 标准,这是我的第一个 post。 (以后请告诉我。谢谢。)
如果您指的是 li 元素之间的空格,则会导致height: 38px;
。改(去掉)就没有间距了
![我怎么看 li 空格][1] https://i.stack.imgur.com/v6Rhl.png