Question

<! doctype html>
<html>
<head>
    <title>Welcome to page 1 - Home</title>
    <link href="style/main.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="container">
        <ul>
            <li><a href="#">Home</al></li>
            <li><a href="#">Back-end</al></li>
            <li><a href="#">Web design</a>
                <ul>
                    <li><a href="#">HTML</al></li>
                    <li><a href="#">CSS</al></li>
                    <li><a href="#">JS</a></li>
                </ul>
            </li>
            <li><a href="#">Resources</a></li>
        </ul>
    </div>

    <div id="header">
    </div>

    <div id="navbar">
    </div>

    <div class="main">
        <h1>About</h1>
        <p>Viverra hac torquent ultricies lectus tempor. Posuere aliquet adipiscing vulputate tempus class placerat fames placerat. Nam magna ultricies per velit velit scelerisque proin netus, natoque. Magnis suscipit porttitor vel. Venenatis conubia duis natoque elementum netus tellus. In ridiculus a sagittis turpis eu ornare et, eros laoreet ad aliquet aliquet. Dapibus varius, nam vehicula Vestibulum nostra sodales maecenas vulputate tempor libero aliquam. Feugiat litora et. Faucibus turpis justo lacus commodo sociosqu litora euismod pharetra ullamcorper malesuada sollicitudin natoque vehicula tristique curabitur neque morbi, convallis at nam gravida feugiat feugiat nunc sit.

Nam. Tristique odio ut litora condimentum aptent, senectus consectetuer. Hendrerit suscipit volutpat fames, vehicula arcu. Pellentesque rhoncus libero varius quam fames. Id sollicitudin tincidunt cras cum maecenas lorem, feugiat metus. Montes. Sociosqu hymenaeos class dis et turpis ornare ipsum.
        </p>
    </div>

 body   {
    margin: 0px;
    padding: 0px;
    background-color: #9c9f84;
    font-family: verdana, gerorgia, serif;
    font-size: 18px;
}
.container {
}

ul {
    margin: 0px;
    padding:0px;
}

ul li {
    background-color: black;
    border: 1px solid white;
    width: 120px;
    height: 30px;
    text-align: center;
    float: left;
    line-height: 30px;
    list-style: none;
}

ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

ul li a:hover {
    background-color: red;
}

ul li ul li {
    display: none;
}

ul li:hover ul li {
    display: block;
}

#header {
    background-color: #5c755e;
    margin: 10px;
    height: 90px;
    border-radius: 5px;
}

#navbar {
    background-color: #5c755e;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
}

.main {
    background-color: #e5e4d7;
    margin: 10px;
    border-radius: 5px;
    padding: 20px;
    font-size: 110%;
}

h1 {
    font-size: 110%;
    color: purple;
}

我一直难以尝试将导航栏放在中心并降低内容。我尝试使用float：left;但它不起作用，但它仍然正常浮动。是因为我的列表元素使它们不能居中吗？我该怎么做才能防止这种情况，还可以降低段落和标题文本。另外，我在网页设计下的下拉菜单是白色的，我怎么能改变这个？我是否必须将其更改为我在悬停时使用的背景颜色？

Answer 1

你可以这样做：

<强> CSS

body {
  margin: 0px;
  padding: 0px;
  background-color: #9c9f84;
  font-family: verdana, gerorgia, serif;
  font-size: 18px;
}

.container {}

ul {
  margin: 0px;
  padding: 0px;
  display: block;
  text-align: center;
}

ul li {
  position: relative;
  display: inline-block;
  background-color: black;
  border: 1px solid white;
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  list-style: none;
}

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

ul li a:hover {
  background-color: red;
}

ul li ul {
  position: relative;
  display: none;
}

ul li:hover ul {
  position: absolute;
  display: block;
  z-index: 99;
  top: 100%;
  left: 0;
}

#header {
  background-color: #5c755e;
  margin: 10px;
  height: 90px;
  border-radius: 5px;
}

#navbar {
  background-color: #5c755e;
  margin: 10px;
  height: 35px;
  border-radius: 5px;
}

.main {
  background-color: #e5e4d7;
  margin: 10px;
  border-radius: 5px;
  padding: 20px;
  font-size: 110%;
}

h1 {
  font-size: 110%;
  color: purple;
}

<强> DEMO HERE

如何让导航栏居中？

1 个答案: