【问题标题】:How to align navbar to center with css如何将导航栏与css对齐
【发布时间】:2015-04-22 05:13:36
【问题描述】:

我需要帮助将我的导航栏对齐到中心 这是我的代码有什么问题?它不会将菜单与中心对齐。

#nav {
  position: absolute;
  left: 0px;
  height: 40px;
  background-color: #2C64B4;
  width: 100%;
  margin: 0 auto;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#nav ul li {
  margin: 0;
  padding: 0;
  float: left;
}
#nav ul li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #FFF;
  text-align: center;
}
<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Blah</a>
    </li>
    <li><a href="#">exampl</a>
    </li>
  </ul>
</div>

【问题讨论】:

    标签: html css nav


    【解决方案1】:

    一种方法是将#nav uldisplay 设置为inline-block。然后将text-align: center添加到父元素中,以使子元素ul居中:

    Example Here

    #nav {
        position: absolute;
        left: 0px;
        height: 40px;
        background-color: #2C64B4;
        width: 100%;
        text-align: center;
    }
    #nav ul {
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    

    或者,您也可以将父元素的display #nav 设置为flex,然后添加justify-content: center 使子元素水平居中。

    Example Here

    #nav {
        position: absolute;
        left: 0px;
        height: 40px;
        background-color: #2C64B4;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    

    【讨论】:

      【解决方案2】:

      这里没什么大不了的。

      只需将text-align:center 添加到ul 并生成li display:inline-block

      HTML

      <div id="nav">
          <ul>
              <li><a href="#">Home</a>
              </li>
              <li><a href="#">About Us</a>
              </li>
              <li><a href="#">Blah</a>
              </li>
              <li><a href="#">exampl</a>
              </li>
          </ul>
      </div>
      

      CSS

      #nav {
          position: absolute;
          left: 0px;
          height: 40px;
          background-color: #2C64B4;
          width: 100%;
          margin: 0 auto;
      }
      #nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
          text-align: center;
      }
      #nav ul li {
          margin: 0;
          padding: 0;
          display: inline-block;
      }
      #nav ul li a {
          text-decoration: none;
          padding: 10px 20px;
          display: block;
          color: #FFF;
          text-align: center;
      }
      

      签到Fiddle

      【讨论】:

        【解决方案3】:

        更新你的 ul 的 css 作为

        #nav ul {
            margin: auto;
             padding: 0;
             overflow: hidden;
             width: 60%;
        }
        

        检查小提琴:

        http://jsfiddle.net/swapnilmotewar/7kk8knd0/2/

        【讨论】:

          【解决方案4】:
          #nav {
              height: 40px;
              background-color: #2C64B4;
              width: 100%;
              margin: 0 auto;
              }   
          #nav ul {
              margin: 0;
              padding: 0;
              text-align:center;
          }
          #nav ul li {
              margin: 0;
              padding: 0;
              display:inline-block;
              position: relative;
          }
          #nav ul li a {
              text-decoration: none;
              padding: 10px 20px;
              display: block;
              color: #FFF;
              text-align: center;     
              }
          

          使用这个 CSS 你会得到解决方案。 如果需要某些类别的下拉列表,请添加 Li 相对位置

          【讨论】:

            【解决方案5】:

            你可以将你的 ul 设置为 display: inline-block;并设置 text-align: center;到父导航:

            #nav {
                position: absolute;
                left: 0px;
                height: 40px;
                background-color: #2C64B4;
                width: 100%;
                text-align:center;
            }   
            #nav ul {
                margin: 0;
                padding: 0;
                display: inline-block;
            }
            

            【讨论】:

              【解决方案6】:
              #nav ul {
                  margin: auto;
                  padding: 0;
              }
              

              【讨论】:

                【解决方案7】:
                #nav {
                    position: absolute;
                    left: 0px;
                    height: 40px;
                    background-color: #2C64B4;
                    width: 100%;
                    margin: 0 auto;
                    text-align:center;
                }   
                #nav ul {
                   margin: auto;
                     padding: 0;
                
                
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <title>Untitled Document</title>
                    <style>
                    #nav {
                        position: absolute;
                        left: 0px;
                        height: 40px;
                        background-color: #2C64B4;
                        width: 100%;
                        margin: 0 auto;
                    	text-align:center;
                    }   
                    #nav ul {
                       margin: auto;
                         padding: 0;
                         overflow: hidden;
                    	 display: inline-block;
                    }
                    #nav ul li {
                        margin: 0;
                        padding: 0;
                        float:left;
                    }
                    #nav ul li a {
                        text-decoration: none;
                        padding: 10px 20px;
                        display: block;
                        color: #FFF;
                        text-align: center;     
                        }
                    	</style>
                    </head>
                
                    <body>
                
                    <div id="nav">
                    <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Blah</a></li>
                    <li><a href="#">exampl</a></li>
                    </ul>
                    </div>
                    </body>
                    </html>
                overflow: hidden; display: inline-block; }

                【讨论】:

                  猜你喜欢
                  • 2019-09-27
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2017-10-27
                  • 2016-10-31
                  • 2021-05-08
                  相关资源
                  最近更新 更多