HTML & CSS - 不能分割菜单和其他对象

Question

我正在做一个简单的汽车服务网站，刚入门，有点初学者，学习和制作网站。

一个主页，我只需要做两件事： 1.菜单 2. 2 个按钮（登录和注册）

我已经做了菜单，也做了按钮，但问题是我不能把它们彼此分开，也许我需要做一些我还不知道的事情。

代码：

/*CSS(Including Registration Form Which Shouldn't Be Needed Now):*/

body {
  background-color: #00e673;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  z-index: 999;
}

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;
  z-index: 999;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
  z-index: 999;
}

ul li a:hover {
  background-color: green;
  z-index: 999;
}

ul li ul li {
  display: none;
  z-index: 999;
}

ul li:hover ul li {
  display: block;
  z-index: 999;
}

.simple-form {
  text-align: center;
  margin: 100px 0px;
  z-index: 10;
}

#registration {
  width: 100%;
  padding: 40px 0px;
  z-index: 10;
}

#reg {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#button {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#ph {
  width: 100px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#phone {
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#rd {
  color: white;
  font-size: 18px;
  z-index: 10;
}

#but {
  color: white;
  font-size: 18px;
  z-index: 10;
}

#butt {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

input.MyLog {
  width: 200px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 150%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

input.MyReg {
  width: 200px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 150%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a>
        <ul>
          <li><a href="services/a-type.html">A Type</a></li>
          <li><a href="services/b-type.html">B Type</a></li>
          <li><a href="services/c-type.html">C Type</a></li>
          <li><a href="services/d-type.html">D Type</a></li>
          <li><a href="services/tech-check.html">Tech Check</a></li>
        </ul>
      </li>
      <li><a href="registration.html">Registration</a>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="profile.html">Profile</a></li>
    </ul>
  </div>
</head>

<body>
  <div class="button">
    <form id="myButtons">
      <input class="MyLog" type="button" value="Login" onclick="location.href='profile.html'" />
      <input class="MyReg" type="button" value="Register" onclick="location.href='registration.html'" />
    </form>
  </div>
</body>

</html>

我进行了搜索，但我猜它对我和我的代码来说是一个非常具体的错误，无法制定任何内容。

这是输出：

我需要以某种方式将登录和注册移动到页面的中心，而不是移动和触摸菜单。

Answer 1

首先，您需要将菜单插入正文页面所有内容的位置。

其次，您需要添加一个新的 div class="container"，它将成为 #button div 的父级。给它一些 CSS.

    <div class="container">
    <div class="button">
        <form id="myButtons">
            <input class="MyLog" type="button" value="Login" onclick="location.href='profile.html'" />
            <input class="MyReg" type="button" value="Register" onclick="location.href='registration.html'" />
        </form>
    </div>
</div>

这是您的 css 容器

.container {
        text-align: center; 
        padding-top: 10rem;
     }

Answer 2

就像 Raz 告诉你的那样，你需要将 <div> 移到 <head> 之外并移到 <body> 标签中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a>
        <ul>
          <li><a href="services/a-type.html">A Type</a></li>
          <li><a href="services/b-type.html">B Type</a></li>
          <li><a href="services/c-type.html">C Type</a></li>
          <li><a href="services/d-type.html">D Type</a></li>
          <li><a href="services/tech-check.html">Tech Check</a></li>
        </ul>
      </li>
      <li><a href="registration.html">Registration</a>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="profile.html">Profile</a></li>
    </ul>
  </div>
  <div class="button">
    <form id="myButtons">
      <input class="MyLog" type="button" value="Login" onclick="location.href='profile.html'" />
      <input class="MyReg" type="button" value="Register" onclick="location.href='registration.html'" />
    </form>
  </div>
</body>

</html>

除此之外，您应该添加此 class:

.button {
  clear: left;
}

HTML & CSS - 不能分割菜单和其他对象

HTML & CSS - Can't divide Menu and Other Objects

html

css

margin