为什么我的 div 不能水平对齐？答案

【问题标题】：Why won't my divs align horizontally?为什么我的 div 不能水平对齐？
【发布时间】：2013-08-21 20:52:23
【问题描述】：

我无法解决的问题。我有一个非常简单的页面布局。容器内的两个 div。顶部的 div div "navigation-block" 包含一个 ul 和 li 的菜单。从 CSS 你会看到它有 30% 的宽度。当前位于“navigation-block”div 下方的 div“bio”的宽度为 30%。

我想要的只是让“bio”div 浮动到“navigation-block”div 的右侧。我确保“导航块”上没有 clear:both 或 clear:right。我已经在“bio” div 和 display:inline 上尝试了 float:left 和 float:right，但我不知道我错过了什么。

HTML 简单明了，没有检查过任何错误。

CSS 下面

.gridContainer {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;   
}

#bio {
width: 30%;
height:auto;
background-color: rgba(256,256,256,0.2);
color: rgba(256,256,256, 0.8);
text-align: center;
border: 1px solid white;
}

#navigation-block {
position:relative;
width:30%;  
}

下面是菜单 CSS 的其余部分

ul#sliding-navigation
{
list-style: none;
font-size: .75em;
padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 60%;
padding: 2% 2%;
margin: 0;
margin-bottom: 1%;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;

}

ul#sliding-navigation li.sliding-element h3
{
color: rgba(0, 0, 0, 0.8); 
background-color: rgba(256, 256, 256, 0.6);
font-weight: normal;
border: 1px solid white;

}

ul#sliding-navigation li.sliding-element a
{
color: #000;
background-color: rgba(256, 256, 256, 0.4);
text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: rgba(256, 256, 256, 0.8); }


<body>
<div class="gridContainer clearfix">

 <div id="navigation-block">
        <ul id="sliding-navigation">
            <li class="sliding-element"><h3>Zion City Limits</h3></li>
            <li class="sliding-element"><a href="Index.html">Home</a></li>
            <li class="sliding-element"><a href="#">Danny</a></li>
            <li class="sliding-element"><a href="#">Dylan</a></li>
            <li class="sliding-element"><a href="#">Bill</a></li>
            <li class="sliding-element"><a href="#">Rich</a></li>
            <li class="sliding-element"><a href="#">John</a></li>
        </ul>
   </div>

<div id="bio">This is the content for Layout Div Tag </div>
</div>
</body>

任何帮助表示赞赏

谢谢

【问题讨论】：

也向我们展示 html 代码
如果您可以发布您的 HTML 或使用您的所有代码创建一个 jsfiddle，您将获得更多帮助。
你有没有尝试在“bio”和“navigation-block”上都设置浮动？
很难说没有任何 HTML 示例。此外，如果您有小提琴或示例链接，将会非常有帮助。但最终，您需要学习如何解决这些问题的工具，所以我建议您使用 Firebug 或类似的 Web 开发人员工具，您可以轻松地突出显示 DOM 元素、更改它们的 CSS 等，以找出某些问题的原因显示它的方式。
你错过了bio div

标签： css html alignment

【解决方案1】：

我知道这是一篇旧帖子，但为了帮助下一个遇到此帖子的人。

display: inline-block;

当父 div 的高度不是静态时，这必须用于在其他 div 内对齐 div。

【讨论】：

尝试使用更健壮的代码添加jsFiddle 示例。这将有助于回答这个问题！
这里有一个简单的快速的。 :) jsFiddle example

【解决方案2】：

这里有两个选项...

 #bio, #navigation-block {
   ...
   display:inline-block
}

或：

#bio, #navigation-block {
   ...
   float: left
}

divs 是块级元素，默认情况下不会彼此相邻

【讨论】：