文本被菜單推下去

我想在我的網站的左側有一個垂直菜單，但是文本被推下，而不是菜單的一側。請忽略段落和標題中的文字。我爲這個可憐的組織或我犯過的任何小錯誤感到抱歉，這是我的第一語言，我仍然在學習。文本被菜單推下去

<style> 
body 
    { 
    background-color:#333; 
    color:#999 
    font: 12px/1.4em Arial,sans-serif; 
    } 
#wrap 
    { 
    margin-left: 10px auto; 
    background: black; 
    padding:10px; 
    width: 100px; 
    } 
#header 
    { 
    background-color:black; 
    color: #fff; 
    } 
#logo 
    { 
    float: center; 
    font-size: 30px; 
    line-height:400px; 
    padding: 500px 
    } 
#navWrap 
    { 
    height:15pxpx; 
    } 
#nav ul 
    { 
    margin: 1px; 
    padding:1px; 
    } 
#nav li 
    { 
    float:center; 
    padding: 5px; 
    background-color: black; 
    margin: 0 5px; 
    color: white; 
    list-style-type: none 
    } 
#nav li a 
    { 
    color:white; 
    text-decoration: none; 
    font-size: 15px; 
    } 
#nav li a:hover 
    { 
    text-decoration: underline; 
    } 
br.clearLeft 
    { 
    clear: left; 
    } 
h1 
    { 
    color:cyan; 
    text-align:center; 
    border-bottom: double 5px; 
    } 
h2 
    { 
    color:red; 
    } 
h3 
    { 
    color:cyan; 
    } 
p.2 
    { 
    color:black; 
    font-size:22px; 
    text-align:left; 
    } 
p 
    { 
    color:#DBDBDB; 
    font-size:22px; 
    text-align:left 
    right: 500px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
     <div id="header"> 
      <div id="logo"></div> 
      <div id="navWrap"> 
       <div id="nav"> 
       <ul> 
        <li><a href="http://aaaaa" class="smothScroll">Home</a></li> 
        <li><a href="http://aaaaaaaaaaaaa" class="smothScroll">About</a></li> 
        <li><a href="http://aaaaaaaaaaaaaaa" class="smothScroll">link1</a></li> 
       </ul> 
       <br class="clearLeft"/> 
       </div> 
      </div> 
     </div> 
     </div> 
     <p>lalalallalalalalalallalalala</p>

來源

2014-11-04 Kevril

@Fahad Hasan謝謝你解決了我的問題，但你介意告訴我鋤頭讓文本留在菜單的頂部嗎？ – Kevril 2014-11-04 02:41:14

我不知道我在做什麼錯，但文本仍然在菜單的底部。我的填充很大，菜單從頁面的頂部延伸到底部。 – Kevril 2014-11-04 03:11:25

你只需要使用下面的CSS來float您#wrap DIV的left那會解決這一問題：

#wrap { 
    float: left; 
}

這裏有一個演示：

body { 
 
    background-color:#333; 
 
    color:#999 font: 12px/1.4em Arial, sans-serif; 
 
} 
 
#wrap { 
 
    margin-left: 10px auto; 
 
    background: black; 
 
    padding:10px; 
 
    width: 100px; 
 
} 
 
#header { 
 
    background-color:black; 
 
    color: #fff; 
 
} 
 
#logo { 
 
    float: center; 
 
    font-size: 30px; 
 
    line-height:400px; 
 
    padding: 500px 
 
} 
 
#navWrap { 
 
    height:15pxpx; 
 
} 
 
#nav ul { 
 
    margin: 1px; 
 
    padding:1px; 
 
} 
 
#nav li { 
 
    float:center; 
 
    padding: 5px; 
 
    background-color: black; 
 
    margin: 0 5px; 
 
    color: white; 
 
    list-style-type: none 
 
} 
 
#nav li a { 
 
    color:white; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
} 
 
#nav li a:hover { 
 
    text-decoration: underline; 
 
} 
 
br.clearLeft { 
 
    clear: left; 
 
} 
 
h1 { 
 
    color:cyan; 
 
    text-align:center; 
 
    border-bottom: double 5px; 
 
} 
 
h2 { 
 
    color:red; 
 
} 
 
h3 { 
 
    color:cyan; 
 
} 
 
p.2 { 
 
    color:black; 
 
    font-size:22px; 
 
    text-align:left; 
 
} 
 
p { 
 
    color:#DBDBDB; 
 
    font-size:22px; 
 
    text-align:left right: 500px; 
 
} 
 
#wrap { 
 
    float: left; 
 
}

<div id="wrap"> 
 
    <div id="header"> 
 
     <div id="logo"></div> 
 
     <div id="navWrap"> 
 
      <div id="nav"> 
 
       <ul> 
 
        <li><a href="http://aaaaa" class="smothScroll">Home</a> 
 
        </li> 
 
        <li><a href="http://aaaaaaaaaaaaa" class="smothScroll">About</a> 
 
        </li> 
 
        <li><a href="http://aaaaaaaaaaaaaaa" class="smothScroll">link1</a> 
 
        </li> 
 
       </ul> 
 
       <br class="clearLeft" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<p>lalalallalalalalalallalalala</p>

來源

2014-11-04 02:29:45

徽標上的padding正在向下推文，而您的line-height是巨大的。我會建議調整這兩個值。

#logo { 
    float: center; 
    font-size: 30px; 
    line-height:400px; // pushing it down 
    padding: 500px; // pushing it down 
}

此外，您將高度設置爲#navWrap，這也會導致您的導航看起來很奇怪。最後，浮動您的#wrap元素將您的內容放在正確的位置。

這裏是能解決您的情況小提琴：

http://jsfiddle.net/cywb70ds/2/

我調整了padding和line-height的#logo元素。

來源

2014-11-04 02:32:52 foxygen

文本被菜單推下去

回答

相關問題