文本被菜单下推

Question

I want a vertical menu to the left side of my site, but the text is getting pushed down and is not to the side of the menu. 我想在网站的左侧放置一个垂直菜单，但是文本被向下推，而不是位于菜单的侧面。 Please ignore text in the paragraphs and headers. 请忽略段落和标题中的文本。 I am sorry for the poor organization or any small mistakes I have made, This is my first language and I am still learning. 对于组织不佳或我犯了任何小错误，我感到抱歉。这是我的母语，我仍在学习。

    <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>

Answer 1

You just need to float your #wrap div to the left using the following CSS and that'll solve the issue: 您只需要使用以下CSS将#wrap div float到left ，即可解决此问题：

#wrap {
     float: left;
}

Here's a demo: 这是一个演示：

 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>

Answer 2

The padding on your logo is pushing the text down, and your line-height is huge. 徽标上的padding将文本向下压，并且line-height很大。 I would suggest adjusting those two values. 我建议调整这两个值。

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

Also, you're setting the height on #navWrap , which is also causing your navigation to look weird. 另外，您正在#navWrap上设置高度，这也使导航看起来很奇怪。 Finally, floating your #wrap element puts your content in the right place. 最后，浮动#wrap元素会将您的内容放在正确的位置。

Here is a fiddle that resolves your situation: 这是解决您情况的小提琴：

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

I adjusted the padding and line-height on the #logo element. 我调整了#logo元素的padding和line-height 。

文本被菜单下推

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-11-04 02:29:45

解决方案2
0 2014-11-04 02:32:52

文本被菜单下推

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-11-04 02:29:45

解决方案2 0 2014-11-04 02:32:52

解决方案1
1 已采纳 2014-11-04 02:29:45

解决方案2
0 2014-11-04 02:32:52