1

ドロップダウン CSS メニューを作成しましたが、インデントされている理由が正直わかりません...

スクリーンショットは次のとおりです。

幅をどのように設定しても、すべて右に揃えられていることがわかる場合.. :(

CSSは次のとおりです。

(すべての CSS が含まれていますが、メニューは次のとおりです: #mainMenu)

@charset "UTF-8";
/* CSS Document */

/* Background styling of all forms (should set is here) */

form#payment {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#f7fca3;
    padding: 10px;
}

form {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#d6f5df;
    padding: 10px;
}

/*styling for text inputs and password of homepage */

input[type="text"]#profile, textarea#profile, input[type="password"]#profile {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:365px;
}

input[type="text"], textarea, input[type="password"]#inputArea {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:300px;
}

p {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

h1 {
    font-family:Arial, Helvetica, sans-serif;   
    color:#231f20;
}

h2 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;  
}

h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

/* Split homepage in two */

#span1 { 
    width: 330px; float: right; 
}

#span2 { 
    width: 390px; float: left; 
}

/* Homepage note */
#note {
    border-style:dashed;border-color:red;
}

/* Registration button link style */

.regbutton a:hover {
    color:#ff;
    text-decoration:none;
}
.regbutton a {
    color:#ff;
    text-decoration:none;
}

.regbutton a:visited{
    color:#ff;
    text-decoration:none;

}

div#steps {
        background-color:#f7fca3;
}

.regbutton
{
    position:absolute;
    color:#ff;
    background:#E76600;
    font-family:Arial, Helvetica, sans-serif;
    padding:6px;
    text-align:center;
    left:550px;
    bottom:30px;
}
.header{
    position:relative;
    width:650px;
    align:center;
    height:200px;
}
.logo{
    position:absolute;
    align:left;
    left:30px;
    top:50px
}
.menu{
    position:relative;
    align:center;   
    top:150px;
}
.content{
    width:800px;
    position:relative;
    align:center;

}
#holder{
    width:100%;
}
.homecontent{
    position:relative;
    width:700px;
    top:20px;
    height:500px;
}

a>div { display: none; }
a:hover>div { display: block; }

a span {display: none;} 
a:hover span#hovImg {
    position: relative;
    right: 0px;
    bottom: 0px;    
    display: block;
}

#mainMenu,
#mainMenu ul {
    list-style: none;
}
#mainMenu {
    float: left;
}
#mainMenu > li {
    float: left;
}
#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#mainMenu ul {
    position: absolute;
    display: none;
z-index: 999;
}
#mainMenu ul li a {
    width: 80px;
}
#mainMenu li:hover ul {
    display: block;
}

/* Main menu
--*/
#mainMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#mainMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#mainMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
--*/
#mainMenu ul {
    background: #f09d28;
}
#mainMenu ul li a {
    color: #000;
}
#mainMenu ul li:hover a {
    background: #ffc97c;
}
4

3 に答える 3

1

おそらくこれが原因で、CSS の省略形を使用しています。

padding: 0 1.5em; /* Top-Bottom(0), Left-Right(1.5em) */

の

#mainMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;  <------ Here
    text-decoration: none;
}
于 2012-10-22T18:13:43.073 に答える
1

ul要素は、ほとんどすべてのブラウザーでデフォルトでパディングを残しています。ここでは、JS Fiddle (http://www.jsfiddle.net) を作成すると非常に役立ちます。しかし、設定してみてください

#mainMenu ul{
    padding: 0;
    margin: 0;
}
于 2012-10-22T18:11:07.170 に答える
1

まず、どのブラウザで表示していますか？また、ボックス メソッドを表示するのに役立つ firebug または何らかのアドオンを使用することをお勧めします。マージンやパディングに関して問題の原因であるかどうかがわかります。そして国境問題。あなたの html ファイルを確認したいのですが、問題をより効率的に解決することができます。私もパディングの問題だと思いますが...

試す： 

#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding-right:.2em;   /*  <--   */
    text-decoration: none;
}
于 2012-10-22T18:32:12.020 に答える