違い - html style




順不同リストがdiv内で左いっぱいに並んでいない (4)

ulとliのパディングとマージンをオーバーライドするだけです。

この簡単なコード:

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

私は単純なナビゲーションバーとして使っている順不同のリストを持っています。 それは以下のようになります:

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

関連するHTML:

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

関連するCSS:

#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;
}

何か案は?


<ul>要素は左揃えですが、 <li>要素のpadding-left10px設定されていpadding-left 。 それが、最初の要素が少し右にある理由です。


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

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

こちらのデモを見る

注:デフォルトでは、jsfiddlesはCSSをリセットします。したがって、このようなことをテストするのには必ずしも適していません。 この種のバグを探すときは必ず "Normalized CSS"を無効にしてください。


メニューの余白と余白を削除できます

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




css