Question

菜单栏本身居中，但栏内的按钮不是。关于如何解决它的任何想法？

我真的不知道自己在做什么，所以感谢任何帮助：D。

.main-navigation {
   clear:both;
   display:block;
   float:left;
   width:100%;
 }

nav.main-nav .container {
   padding:0;
   text-align:right;
 }

.container {
   margin-left:auto;
   margin-right:auto;
   padding-left:15px;
   padding-right:15px;
 }

ul#primary-menu li a {
   color:#404040;
   font-size:14px;
   font-weight:100;
   letter-spacing:2px;
   margin-right:35px;
   text-decoration:none;
   text-transform:uppercase;
 }

ul#primary-menu > li > a {
   line-height:40px;
 }

.main-navigation a {
   display:block;
   text-decoration:none;
 }

Answer 1

尝试在“.main-navigation”中使用此功能，您的菜单栏应该居中，因为它的宽度：100％，只要它是您应该运行的父元素

text-align: center;

另外，请尝试将其放入ul

display: block;
<!-- if its horizontal -->
display: inline-block;

body, html{
    margin: 0;
    height: 100%;
}
.nav{
  width: 100%;
  height: 50px;
  background-color: black;
  text-align: center;
  
}
.nav ul{
  margin: 0;
  list-style-type: none;
  
}
.nav li{
  display: inline-block;
  border: 1px solid white;
  width: auto;
  height: 20px;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav a{
  text-decoration: none;
  color: white;
  transition: background-color 2s;
  transition: color 2s;
}

<div class="nav">
  <ul>
      <li>
          <a href="#">Home</a>
      </li>
      
      <li>
          <a href="#">About Us</a>
      </li>
      
      <li>
          <a href="#">Contact Us</a>
      </li>
   </ul>
</div>

我无法将菜单栏设为中心（CSS）

1 个答案: