Question

我在一些教程的帮助下创建了这个页面，我编辑了代码，在页面中央附加了一个文本框，但文本框与导航菜单混合在一起。一些帮助将不胜感激。我对html和css知之甚少，所以请以简单的方式指导我。我在谷歌上搜索并得到了一篇w3文章，但这并没有帮助，因为我已经在css中使用它，因为你可以看到我已经使用了margin-top，bottom，left和right来解决问题，而是它混合或者将自己与导航菜单重叠。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你必须添加

.background {
  clear: both;
}

这是为了清除之前应用的float：left。

Html和Css文本框混合导航菜单

1 个答案: