Question

我正在将导航栏中心放到页面中间。我还没有做过任何CSS。

HTML

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

Answer 1

您需要添加一些CSS来指定类属性，这将定义您已定义为这些类的成员的元素的属性。

像这样的东西

#menu-wrap {
    width:750px;
    margin:0 auto;
    list-style:none;
}

您可以参考此tutorial

Answer 2

所以为了对齐布局元素。你会想要使用CSS。希望这会让你开始：

制作水平导航元素时，我们通常使用float或display:inline属性强制单行链接在一行上。为了使整个nav元素居中，你可以像我在这里做的那样给它一个宽度，这允许我们将它的边距设置为auto，它将整个div水平居中。

nav ul li{
    list-style:none;
    float:left;
    margin:5px;
}

nav{
    height:50px;
    display:table;
    background:#eee;
    margin:auto;
}

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

尽管如此，它看起来很糟糕。使用更多CSS样式，您可以将此菜单变为更好的内容。

Answer 3

添加align =“center”

<div class = "menu-wrap" align="center">

Answer 4

.ul {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;							
}

.li {
  background-color: white;
  padding: 0.5rem;
  margin: 0.5rem;							

  -webkit-align-self: center;							
  align-self: center;
}

a .li:hover {
  color: #000000;
  background-color: lightgreen;
  cursor: pointer;
}

<div class = "menu-wrap">

<div class="ul">
  <a><div class="li">Home</div></a>
  <a><div class="li">Products</div></a>
  <a><div class="li">Contact Us</div></a>  
  <a><div class="li">About</div></a>				
</div>
  
</div>

如何使导航栏居中？

4 个答案: