第一个李之前的奇怪空间

时间:2014-09-15 12:38:42

标签: css html-lists nav

enter image description here我遇到了一个非常奇怪的问题,我在第一个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时,它会发生相同的情况。 请事先提供帮助。

0 个答案:

没有答案