如何将导航菜单的ul元素居中？

Question

我找到了这个移动导航菜单模板：https://codepen.io/Tyutyesz/pen/KKdEjwr

当我测试它并粘贴 html 编辑器的菜单代码时，ul 元素和菜单 class="navigation__wrapper" 之间几乎没有空间（用红色边框标记的空间）：

Codepen 没有显示这个空间，但是如果我制作 html 文件并使用浏览器观看相同的代码，则会显示该空间。

这里出现了空白区域：

.navigation{
  position:relative;
  height:80px;
  padding:0 15px;
  background-color: #00688B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navigation__logo a{
  text-decoration:none;
}
.navigation__logo p{
  color:#ffffff;
  font-weight: bolder;
  text-transform: uppercase;
  text-decoration: none;
}
.navigation__links{
  position: absolute;
  width:300px;
  height:100vh;
  left:-1000px;
  top:0;
  z-index:2;
  transition: left 0.3s ease-in;
  background:#00688B;
  color:#ffffff;
  list-style: none;
  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.75);
}
.navigation__links li{
  padding: 5px 10px;
  text-alig:center;
  border-bottom:1px solid rgba(255,255,255, 0.3);
}
.navigation__links a{
  color: #ffffff;
  text-decoration:none;  
}

#hamburger{
  visibility:hidden;
}
.navigation__button{
  position:relative;
  display: inline-block;
  width: 30px;
  height:30px;
  background:transparent;
  border:1px solid #ffffff;
  cursor:pointer;
}
.navigation__button span{
  position:absolute;
  left: 5px;
  display:inline-block;
  width:20px;
  height:1px;
  background-color: #ffffff;
  transform-origin:center;
  transition: opacity 0.2s linear, all 0.3s linear;
}
.navigation__button span:nth-of-type(1){
  top: 10px;
}
.navigation__button span:nth-of-type(2){
  top: 15px;
}
.navigation__button span:nth-of-type(3){
  top: 20px;
}


/* Here comes the magic */

#hamburger:checked ~ .navigation__links{
  /* Or it can be "input[type="checkbox"] ~ .navigation__links" */
  left:0;
}

/* Styles for our "close" button */
#hamburger:checked ~ .navigation__button span:nth-of-type(1){
  transform: rotate(45deg);
  top: 15px;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(2){
  opacity:0;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(3){
  transform: rotate(-45deg);
  top: 15px;
}

<nav role="navigation" class="navigation">
  <div class="navigation__logo">
    <a href="/"> 
        <p>Logo</p>   <!-- Your logo goes here -->
    </a>
  </div>
  <div class="navigation__wrapper">
    <input type="checkbox" id="hamburger">
    <label for="hamburger" class="navigation__button">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <ul class="navigation__links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

我尝试过对 class="navigation__wrapper"、ul 和 li 元素使用

align-items: center;

和

align="center"

，但总是出现空白。

Answer 1

要将（无序列表）元素在导航菜单中居中，您可以使用 CSS 样式来设置元素的边距和填充。这是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Centered Navigation Menu</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>


body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

nav {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px; /* Adjust as needed */
}

a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

在此示例中，使元素在导航菜单中居中的关键 CSS 属性是：

文本对齐：居中；在父元素上：此属性使内联级子元素居中（如）。

保证金：0；和填充：0；在元素上：这会删除浏览器可能应用于元素的任何默认边距和填充。

显示：内联块；在

元素上：这使得列表项内联，允许它们在 .

内居中

根据您的具体设计要求和偏好调整样式。

如何将导航菜单的ul元素居中？

问题描述投票：0回答：1

1个回答

最新问题

如何将导航菜单的ul元素居中？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1