我遇到了一个非常奇怪的问题,我在第一个li(从左侧需要大约35%)之前就无法移除空间。 这是第一次发生在我身上。
这是我的HTML代码:
<div class="wrapper">
<header id="mainHeader" class="clearfix">
<div id="logo">
<hgroup>
<h1>Template LOGO</h1>
<h2>szablon Wordpress</h2>
</hgroup>
</div><!-- /logo -->
<div id="social">
<div class="icons">
<a href="#" class="circle">
<div class="ico-facebook"></div>
</a><!-- /circle -->
<a href="#" class="circle">
<div class="ico-twitter"></div>
</a><!-- /circle -->
<a href="#" class="circle">
<div class="ico-rss"></div>
</a><!-- /circle -->
<a href="#" class="circle">
<div class="ico-email"></div>
</a><!-- /circle -->
</div><!-- icons -->
<p>Call now: 800 001 001</p>
</div><!-- social -->
</header>
<nav id="mainMenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Shortcodes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><!-- mainMenu -->
</div><!-- /wrapper -->
CSS(SASS):
nav#mainMenu {
font-family: $font2;
height: 76px;
background: $orange1;
border-bottom: 4px solid #b23c11;
ul {
// list-style: none;
// margin: 0;
// padding: 0;
padding-left: 0;
// padding-left: 0;
li {
display: inline-block;
// padding: 0;
// margin: 0;
a {
// padding: 0;
// margin: 0;
}
}
}
}
CSS输出:
nav#mainMenu {
font-family: "PT Sans", sans-serif;
height: 76px;
background: #df4b16;
border-bottom: 4px solid #b23c11;
}
nav#mainMenu ul {
padding-left: 0;
}
nav#mainMenu ul li {
display: inline-block;
}
当我设置li - float:left时,它会发生相同的情况。 请事先提供帮助。