html - CSS 内联外部的不同行为

Question

我正在学习 css atm，我正在尝试使用外部 css 来设计我所有网站的样式。我发现如果我这样做:

<ul id="menu" style="width:420px; margin:0 auto">

我得到了我想要的结果，但是如果我在外部文件上这样做:

这是CSS文件:

*{
margin:0px;
padding:0px;}

header, section, footer, aside, nav, article, hgroup {
display:block;}

body {
width:100%;
display:-webkit-box;
background-color: #808286;
-webkit-box-pack: center;}

#container {
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
background-color: #FFFFFF;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1; }

#top_header {
background-color: #fdd023;
padding: 20px;
border: 2px solid #49207e;}

#new_div {
display:-webkit-box;
-webkit-box-orient: horizontal; }

#navigation_bar {
border: 1px solid #5970B2;
padding: 0;}

#main_section   {
border: 1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;}

 #side_left {
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;}

 #main_footer {
text-align: center;
padding: 20px;
border-top: 2px solid green;}

#menu {
    width:420px; 
    margin:0 auto;}
#menu li {
list-style: none;
display: inline;
}

#menu li a {
display: inline;
padding: 0 8px 0px;
text-align: center;
text-decoration: none;
}

#menu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#menu div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;}

这是 Html 代码:

<div id="container">
    <nav id="navigation_bar">
    <ul id="menu">
        <li>
            <a href=""">
                A
            </a>
                <div id="firstMenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                </div>
        </li>
        <li>
            <a href="">
                B
            </a>

                <div id="secondMenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4 </a>
                </div>
        </li>
        <li>
            <a href="">
                C
            </a>
        </li>
        <li>
            <a href="">
                D
            </a>
        </li>
        <li>
            <a href="">
                E
            </a>
        </li>
        </ul>
        <div style="clear:both"></div>
    </nav>

我得到了不同的布局。第一个使我的菜单栏居中，第二个给我一些填充。我正在使用 Chrome，但我想我可能在这里遗漏了一个关键概念。

Answer 1

您看到的差异是由页面上的一些其他代码造成的。

如果应用了 CSS 规则(在应用级联之后)，那么就渲染而言，它来自何处并不重要。