Question

我有一个4个菜单项的列表并排使用display：inline-block;。每个项目都是120px，因此我应该能够将父容器设置为480px宽，但是这会将最后一项发送到下一行，为什么会这样？

这是一个jsfiddle：http://jsfiddle.net/htdgdhxn/

我的HTML：

<section id="nav">

    <div id="nav-wrapper">

        <ul id="nav-list">
            <li id="nav-home"><a href="index.php">Home</a>
            </li>
            <li id="nav-clothes"><a class="category All">Clothes</a>
            </li>
            <li id="nav-about"><a href="aboutus.php">About Us</a>
            </li>
            <li id="nav-contact"><a href="contactus.php">Contact Us</a>
            </li>                                                                           
        </ul>           

    </div>

</section>

CSS：

* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }

我已经过测试，这种情况发生在Chrome，IE和Firefox中。

Answer 1

删除每个<li>

之间的空格

<li></li> <...space here...> <li></li>

内联块元素在li元素之间创建了一个间隙。

<ul id="nav-list">
   <li id="nav-home"><a href="index.php">Home</a>
   </li><li id="nav-clothes"><a class="category All">Clothes</a>
   </li><li id="nav-about"><a href="aboutus.php">About Us</a>
   </li><li id="nav-contact"><a href="contactus.php">Contact Us</a>
   </li>                                                                            
</ul>

See fiddle

Answer 2

只需将容器的宽度增加到500px

即可

#nav-list { height: 100%; width: 500px; }

或删除连续li标签之间的空白

或

在display:initial

中申请#nav-list { height: 100%; width: 480px;}

即#nav-list { height: 100%; width: 480px; display: initial;}

Answer 3

当想要控制边距和填充时，内联块值非常有用＆＃34;直列＆＃34;元素不需要block and float他们。一个问题就是这个问题当你使用inline-block时，HTML中的空格成为屏幕上的可视空间 Gross。有几种方法可以消除这个空间;其中一些是粗略的，一个是相当好。

解决方案0：元素之间没有空格：这个问题的唯一100％解决方案是不在HTML源代码中的这些元素之间放置空格：

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

解决方案1：父级上的字体大小：0 最好的空白空间解决方案是将父级的字体大小设置为0到内联块元件。

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

解决方案2：HTML评论 这个解决方案有点匪徒但也有效。使用HTML注释作为元素之间的间隔符就像在元素之间放置空格一样：

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

它可能对你有帮助。

Answer 4

原因： - 1. li元素中文本的字体大小可能导致问题。您可以通过减小字体大小来修改它。

#nav-list li a { text-decoration: none; color: #000; font-size: 1.2em; display: block; height: 100%;line-height: 74px; }

而不是使用此

 #nav-list li { display: inline-block; }

你可以这样做： -

     #nav-list li { display: inline; font-weight:bold;}

如果有帮助，请告诉我。

内联块元素溢出父容器

4 个答案: