html - 順序付けされていないリストがdivの左端まで整列していません

Question

単純なナビゲーションバーとして使用している順序付けられていないリストがあります。以下のようになります。

ご覧のとおり、要素は含まれている<li>要素の左端まで整列していません<div>。私は含まれていることを試しtext-align: left;ましたが<div>、効果がないようです。

    #menu {
        width: 800px;
        margin: 0 auto;
    }
    
    #menu div {
        float: left;
        width: 400px;
        height: 60px;
        background-color: #CACACA;
    }
    
    #menutop {
        text-align: left;
    }
    
    #menutop ul {
        list-style: none;
    }
    
    #menutop li {
       display: inline;
       padding: 10px;
    }
    
    #menutop a {
        color: #000000;
        text-decoration: none;
    }
    
    #menutop a:hover {
        text-decoration: underline;
    }
      

    <div id="menu">                                                                         
        <div id="menutop">                                                                  
            <ul>                                                                            
                <li><a href="#">Home</a></li>                                               
                <li><a href="#">About</a></li>                                              
            </ul>                                                                           
        </div>     

何か案は？

Answer 1

ulブラウザにli応じて、デフォルトでマージンまたはパディングがあります。メニュー内でこのデフォルト スタイルをオーバーライドする必要があります。

#menu ul, #menu li {
    margin: 0; padding: 0;
}

ここでデモを見る

^{注: デフォルトでは、jsfiddles は CSS のリセットを行うため、この種のテストには必ずしも適しているとは限りません。この種のバグを探すときは、必ず「Normalized CSS」を無効にしてください。}

Answer 2

パディングを設定、マージン 0px、

#menutop ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

デモ

http://jsfiddle.net/tQb75/

Answer 3

ul と li のパディングとマージンを上書きできます。

この簡単なコード:

.menu ul, .menu li{
   margin:0;
   padding:0;
}

Answer 4

CSS Resetを使用してみてください。

最も単純な形式は次のとおりです。

* { margin: 0; padding: 0; }

Answer 5

メニューのマージンとパディングを削除できます

#menu *{
margin:0;
padding:0;
}

Answer 6

<ul>要素は左揃えですが、<li>要素は にpadding-left設定されてい10pxます。そのため、最初の要素が少し右にあります。