Question

我想在我网站的左侧放置一个垂直菜单，但是文字被推下而不是菜单的一侧。请忽略段落和标题中的文字。我很抱歉这个糟糕的组织或我犯过的任何小错误，这是我的第一语言，我还在学习。

    <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

您只需使用以下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>

{{1}}

Answer 2

徽标上的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。

文本被菜单按下

2 个答案: