居中对齐浮动导航栏并从左到右下拉答案

【问题标题】：center align a floated nav bar and dropdown from left to right居中对齐浮动导航栏并从左到右下拉
【发布时间】：2014-09-02 16:14:25
【问题描述】：

我想将导航栏中的内容居中对齐（以便 img 是导航栏的中心。我知道我有 float: left；但如果我不这样做，（左边的东西，右边的东西）将会下降到img的底部边缘。所以我想要的是保持向左浮动，但能够显示：inline-block，或相等的东西。我还希望（左边的东西）的下拉栏从img的开始左侧，然后向右侧扩展。
demo fiddle

HTML

  <div id="nav">
    <div id="container">
        <ul>
            <li>
               <a href="#"> Left thing </a>

                <ul>
                    <li><a href="#"><----- want it to go this way</a>
                    </li>
                    <li><a href="#">i want this to start under left thing</a>
                    </li>
                </ul>
            </li>
            <li>
                <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="height:70px" />
            </li>
            <li>
              <a href="#"> Right thing </a>

                <ul>
                    <li><a href="#">This starts right</a>
                    </li>
                    <li><a href="#">And this is right</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
#body {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}
#nav {
    background-color: 72776A;
    width: 100%;
    position:fixed;
    height:50px;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    display:block;
}
#nav ul li {
    float:left;
}
#container {
    text-align:;
}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: ACD661;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position:absolute;
    color: red;
    border: 1px solid black;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
}

【问题讨论】：

缩进代码会有很大帮助。现在很难说里面有什么。

标签： html css navbar

【解决方案1】：

替换

#container {
  width: 270px;
  margin: 0px auto;
}

检查this小提琴

【讨论】：

【解决方案2】：

在讨论解决方案之前，让我们先谈谈你的 CSS，我删除了 margin:0, padding:0 的重复项、突出显示的忘记选择器或错误输入。您需要将 width 精确到您的容器 div 并添加 margin-left 和 margin-right auto 以实现您想要的：

/* {
    padding: 0;
    margin: 0;
} not the best solution, everybody don't need this rule */

/* instead here a group of selectors */

body,
#nav ul {
    padding: 0;
    margin: 0;
}
/*#*/body { /* you mean just body right ? */
    font-family: Arial;
    font-size: 17px;
}

#nav {
    background-color: #72776A; /* you forgot # here */
    width: 100%;
    position:fixed;
    height:50px; /*it's smaller than your image*/
}
#nav ul {
    list-style-type: none;
    position: relative;
    /*display:block; don't need */
}

#nav li {
    float:left;
}
#container {
    /*text-align:; seems it's missing something here ? */
    margin: 0 auto;
    width: 300px;
}

#nav ul li:hover {
    background-color: #333;
}

#nav ul li a,
#nav ul li a:hover,
#nav ul li a:visited {/ { /* you mean a:visited ? */
    color: #ACD661; /* here again # forgot */
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav li:hover ul { /*ul don't need (i mean #nav ul li...) */
    display: block;
}
#nav ul ul {
    display: none;
    position:absolute;
    color: red;
    border: 1px solid black;
}
#nav li li { /* shorter then ul ul li */
    display: block;
}
#nav a li a:hover {
    color: #699;
}

可以看代码here

【讨论】：