我在一些教程的帮助下创建了此页面，并编辑了代码以在页面中央附加一个文本框，但该文本框与导航菜单混合在一起。一些帮助，将不胜感激。我对html和CSS的了解很少，所以请以简单的方式指导我。我在google上搜索，还得到了w3文章，但没有帮助，因为我在css中使用了它，因为yu可以看到我已经使用margin-top，bottom，left和right来解决问题，但它是混合的或将其自身与导航菜单重叠。
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a>
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li><a href="Todo.html">Things to do</a>
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a>
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li><a href="News.html">News</a></li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>最佳答案
您必须添加
.background {
clear: both;
}
这是为了清除以前应用的float：left。
Read more on float