Question

如何将此菜单对齐网页中心？如何在网页中心对齐此菜单？如果这段代码写得比现在看起来更好，我们将不胜感激。提前致谢。

编辑：我如何制作a：将绿色悬停为全宽黄色。

<!DOCTYPE html>
<html>

<head>
<title>.</title>


<style>
#logo {font-family:arial; color:teal;text-align:center;}


ul{margin:0; padding:0;}
li{list-style:none;padding:20px; margin:2px;width:150px;background-color:yellow;margin:10px; text-   align:center;}
a {text-decoration:none;font-family:arial;font-weight:bold;padding:20px;color:teal;}

.menu li a:hover {background-color:green;color:white  !important;}
.menu li a:visited {color:teal;}

<body>
<h1 id="logo"> TEXT </h1>

<div class="menu">
<ul>
<li> <a href="#text1"> Text1 </a> </li>
<li> <a href="#text2"> Text2 </a> </li>
<li> <a href="#text3"> Text3 </a> </li>
</ul>
</div>
</body>
</html>

Answer 1

您需要对代码进行的更改：

将width添加到ul并应用margin: 0 auto将其水平居中放置在网页上。
将:hover州应用于li，以更改background-color的整个li。
将margin: 10px中的margin-top: 10px更改为li。
将cursor: pointer添加到li:hover以更改悬停时的光标。

#logo {
  font-family: arial;
  color: teal;
  text-align: center;
  padding: 0;
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  width: 190px;
  margin: 0 auto;
}
li {
  list-style: none;
  padding: 20px;
  margin: 2px;
  width: 150px;
  background-color: yellow;
  text-align: center;
  margin-top: 10px;
}
a {
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: teal;
}
.menu li:hover {
  background-color: green;
  cursor: pointer;
}
.menu li:hover a {
  color: white;
}
.menu li a:visited {
  color: teal;
}
body {
  margin: 0;
}

<body>
  <h1 id="logo"> TEXT </h1>

  <div class="menu">
    <ul>
      <li> <a href="#text1"> Text1 </a> 
      </li>
      <li> <a href="#text2"> Text2 </a> 
      </li>
      <li> <a href="#text3"> Text3 </a> 
      </li>
    </ul>
  </div>
</body>

Answer 2

Hello you can use this code:

.menu{
    text-align: center;
}
.menu ul{
  display: inline-block;
}

to align your menu to center

Answer 3

.menu{ 
    position:relative; 
    top:20px;
    left: 200px;
}

您可以通过更改左侧和顶部值来调整位置。要向相反方向移动位置，请将值设为负值

.menu{ 
    position:relative; 
    top:-20px;
    left:-200px;
}

Answer 4

试试这个，

 .menu{
        text-align: center;
    }
    ul{
       display: inline-block;
    }
    li:hover{
       background-color: green;
    }
    li:hover a{
       color: white;
    }

如何在网页中心对齐此菜单？

4 个答案: