BinaryDevelop
  1. ホーム
  2. html

[解決済み] margin: 0 autoでcenterできないのはなぜですか？

2022-06-07 07:24:59

質問

私は #header という div があります。 100% width で、その div の中に順序なしリストがあります。私は margin: 0 auto を適用しましたが、ヘッダーdivの中で中央化されません。

誰か理由を教えてください。親 div の幅を定義すれば、順番なしリストは margin: 0 auto . 私は何が足りないのでしょうか？

以下は私のコードです。 

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

どのように解決するのですか？

親要素ではなく、センタリングする要素の幅を定義する必要があります。 

#header ul {
    margin: 0 auto;
    width: 90%;
}

編集 : OK、私は今テストページを見ました、そして、私はあなたがそれをしたいと思う方法をここにあります。 

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します