0

在本站示例页面下面的源代码中：

 http://6.470.scripts.mit.edu/css_exercises/exercise5.html

<head>
<style>
body
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background-color: #bbbbbb;
}
#container
{
    width:1000px;
    background-color:#dddddd;
    text-align: center;
    margin: auto;
}
#navigation
{
    display: inline-block;
    margin-top:20px;
}

#navigation_bar
{
    list-style-type:none;
    margin:auto;
    padding:0;
    overflow:hidden;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#navigation_bar li
{
    float:left;
}
#navigation_bar a:link, #navigation_bar a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#993738;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1 id="big_title">6.470 Web Programming Competition</h1>
    </div>
    <div id="navigation">
        <ul id="navigation_bar">
            <!--On a real website, you would put the URL you want to navigate to inside href-->
            <li><a href="#home">Home</a></li>
            <li><a href="#materials">Materials</a></li>
            <li><a href="#competition">Competition</a></li>
            <li><a href="#pastyears">Past Years</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </div>
</body>

仅当在 div#navigation 中使用 display: inline-block 时，导航栏才会居中。如果将其删除，则导航栏根本不会居中。甚至 ul#navigation_bar 的 margin: auto 也无济于事。如果 ul##navigation_bar 提到了宽度，那么它可以使导航栏居中。我的问题是，整个事情是如何工作的，即 display:inline-block 如何使导航栏居中，固定宽度如何使 ul#navigation_bar 也起作用？以及 margin: auto 如何没有像其他情况一样的效果？

非常感谢帮助澄清。

4

1 回答 1

1

这<ul>是一个块元素，默认情况下会尝试占据其容器的整个宽度。在inline-block父级上，它只会增长到其内容（<li>s）的宽度，因为元素的内容inline-block被格式化为块框。这受块格式化上下文的影响 -<ul>触及其容器的边缘。如果display: inline-block未在 上指定<div>，它将占据整个宽度， , 也是如此<ul>，并且margin: 0 auto;没有效果。

请注意，您也可以自己穿上display: inline-block以<ul>减小其宽度并使其margin: 0 auto生效。

于 2013-03-31T04:15:28.123 回答