【问题标题】:How to center a nav bar?如何使导航栏居中?
【发布时间】:2015-06-06 22:12:35
【问题描述】:

我无法将导航栏置于页面中间。我还没有做任何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>

【问题讨论】:

标签: html nav


【解决方案1】:

.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>  

【讨论】:

    【解决方案2】:

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

    在制作水平导航元素时,我们通常使用floatdisplay: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 样式,你可以把这个菜单变成很棒的东西。

    【讨论】:

      【解决方案3】:

      添加 align="center"

      &lt;div class = "menu-wrap" align="center"&gt;

      【讨论】:

      • 这是一个折旧的属性。坏主意。
      【解决方案4】:

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

      类似的东西

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

      你可以参考这个tutorial

      【讨论】:

        猜你喜欢
        • 2023-03-27
        • 1970-01-01
        • 1970-01-01
        • 2014-05-03
        • 2014-05-18
        • 2019-09-02
        • 2015-12-09
        相关资源
        最近更新 更多