我想在我的网站左侧有一个垂直菜单，但文本被下推并且不在菜单的一侧。请忽略段落和标题中的文本。对于糟糕的组织或我犯的任何小错误，我深表歉意，这是我的第一语言，我仍在学习。
<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>
最佳答案
您只需要使用以下 CSS 将您的 #wrap div float 到左侧即可解决问题:
#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>关于html - 文本被菜单下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26726714/