Question

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

 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中使用inline-block。如果删除它，则导航栏根本不居中。甚至边距：自动为ul＃navigation_bar也无济于事。如果提到ul ## navigation_bar的宽度，则它可以使导航栏居中。我的问题是，整个过程是如何工作的，即如何显示：内联块使导航栏成为中心，固定宽度如何使ul＃navigation_bar也起作用？保证金：auto如何在其他情况下没有效果？

非常感谢帮助澄清。

Answer 1

<ul>是一个块元素，默认情况下会尝试占用其容器的整个宽度。在父级上使用inline-block时，它只会增长到其内容的宽度（<li> s），因为inline-block元素的内容are formatted as a block box。这受block formatting context的影响 - <ul>触及其容器的边缘。如果display: inline-block上未指定<div>，则<ul>占据整个宽度，margin: 0 auto;也是如此，display: inline-block无效。

请注意，您还可以将<ul>放在margin: 0 auto上，以减少其宽度并使{{1}}生效。

css：inline-block帮助导航栏居中 - 需要了解工作情况

1 个答案: