<分区>
<分区>
在下面的代码中,我无法理解为什么green li's Home, Products, Services, About Us, Contact之间有一个小间距
我已将 .ul
和 .li
属性中的边距和填充设置为 0px。那为什么绿李之间会有空隙呢?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>
最佳答案
如果您在列表元素之间没有换行,那么它就可以工作。所以你可以把所有的都放在一行上(见片段)或添加 font-size: 0;
到 <ul>
ul {font-size:0;}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li><li>Products</li><li>Services</li><li>About Us</li><li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>
关于html - 为什么 ul li 之间有差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37920721/