0

私はcssatmについて学んでおり、外部のcssを使用してすべてのWebサイトのスタイルを設定しようとしています。私がそうするなら、私はそれを見つけました：

<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>

別のレイアウトになります。1つ目はメニューバーを中央に配置し、2つ目は少しパディングを表示します。Chromeを使用していますが、ここで重要な概念が欠落している可能性があります。

4

1 に答える 1

4

表示されている違いは、ページ上の他のコードによるものです。

CSS ルールが適用される場合 (カスケードが適用された後)、レンダリングに関する限り、それがどこから来たかは問題ではありません。

于 2012-10-14T19:24:11.027 に答える