选项1

Question

我正在研究某些东西，并继续在我的css navabar上填充一些填充物，它非常简单，但是我无法弄清楚它在哪里抓住填充物将它推向右边约5个像素。

请注意悬浮在更新个人资料上的小灰色空间？

我似乎无法找到导致这种情况的css。有人在我的代码中注意到了什么 CSS：

body {
            margin: 20px;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
            background-color: #555;
        }
        #nav {
            text-align: center;
        }
        /* Begin Navigation Bar Styling */
        #nav ul {
            text-align: center;
            font-size: 11px;
            width: 100%;
            margin: 0;
            padding: 0;
            display: inline-block;
            padding: 0;
            list-style: none;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }
        #nav li {
            display: inline-block;
        }
        #nav li a {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #069;
            border-right: 1px solid #ccc;
        }
        #nav li a:hover {
            color: #c00;
            background-color: #fff;
        }
        /* End navigation bar styling. */
        div {
            text-align: center;
        }
        div#page {
            background-color: white;
            margin: 0 auto;
            text-align: left;
            width: 755px;
            padding: 0px 10px 0 10px;
        }
        div#header {
            border-bottom: 1px solid black;
            height: 30px;
            line-height: 30px;
        }
        div#content {
            background: none repeat scroll 0 0 none;
            border: 0px solid blue;
            width: 100%;
            line-height: 500px;
            min-height: 500px;
            _height: 500px
        }
        div#footer {
            border: 0px solid red;
            height: 30px;
            line-height: 30px;
            border-top: 1px solid black;
            font-size: 9pt;
        }

HTML：

<div id="page">

            <div id="header">



                <div style="float: left;">Welcome Admin</div>

                <div style="float: right;">LOGOUT</div>

                <div id="nav">



                    <ul id="nav">

                        <li><a href="#">Home Page</a>
                        </li>

                        <li><a href="#">My Account</a>
                        </li>

                        <li><a href="#">Update Profile</a>
                        </li>

                        <li><a href="#">Change Avatar</a>
                        </li>

                        <li><a href="#">Change Password</a>
                        </li>

                        <li><a href="#">Support</a>
                        </li>



                    </ul>

                </div>

            </div>

            <div id="content">Content</div>

            <div id="footer">
                <div style="float: right;">copyright 2014</div>
            </div>

        </div>

Answer 1

在#nav li的css中进行以下更改：

#nav li {
  float: left;
}

已移除display:inline-block;并将其替换为float: left;属性。

根据@ Bokdem的评论更新

保持css不变：

#nav li {
  display: inline-block;
}

将ul标记中的内容写在一行中，例如：

<li><a href="#">Home Page</a></li><li><a href="#">My Account</a></li><li><a href="#">Update Profile</a></li><li><a href="#">Change Avatar</a></li><li><a href="#">Change Password</a></li><li><a href="#">Support</a></li>

这将消除额外的空间。

或者

#nav li {
  display: inline-block;
  margin-left: -4px;
}

或者

将ul标记中的内容写为：

<li><a href="#">Home Page</a></li><!--
--><li><a href="#">My Account</a></li><!--
--><li><a href="#">Update Profile</a></li><!--
--><li><a href="#">Change Avatar</a></li><!--
--><li><a href="#">Change Password</a></li><!--
--><li><a href="#">Support</a></li>

Answer 2

如果使用inline-block元素，则会在连续元素之间留下空隙。

选项1

您可以通过添加负边距来消除此差距。在你的情况下 -

#nav li {
    margin-right: -3px;
}

<强> DEMO 1

选项2

您可以通过在HTML上注释掉空格来省略差距。

<ul id="nav">
    <li><a href="#">Home Page</a>
    </li><!--
    --><li><a href="#">My Account</a>
    </li><!--
    --><li><a href="#">Update Profile</a>
    </li><!--
    --><li><a href="#">Change Avatar</a>
    </li><!--
    --><li><a href="#">Change Password</a>
    </li><!--
    --><li><a href="#">Support</a>
    </li>
</ul>

它确实看起来很时髦，但它有效：）

<强> DEMO 2

从导航栏UL css中删除填充

2 个答案:

选项1

选项2