无法获得两个div来水平对齐

Question

I am trying to get <head> and <head> to align horizontally. 我想让<head>和<head>水平对齐。 I've tried using .header_nav { float:left; clear:both; } 我尝试过使用.header_nav { float:left; clear:both; } .header_nav { float:left; clear:both; } .header_nav { float:left; clear:both; } but it doesn't seem to be working. .header_nav { float:left; clear:both; }但似乎并不奏效。

You can check the actual page at http://www.bolistylus.com 您可以在http://www.bolistylus.com上查看实际页面

Thanks for your help! 谢谢你的帮助！

    <header id="branding" role="banner">
            <div class="header_nav">
            <div class="head">
                <hgroup>
                    <h1 id="site-title"><a href="/"><img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/boli-logoLimeBlack.png" alt="stylus for iPad"/></a></h1>
                    <h2 id="site-description"></h2>
                </hgroup>
            </div>
            <div class="head">

            <ul>

                            <li><a href="/shop">SHOP</a></li>      


                            <li><a href="/about-us">ABOUT US</a></li>

                            <li><a href="/faq">FAQ</a></li>


                            <li><a href="/cart">YOUR CART</a></li>
                </ul>

            </div>  
</div>





    </header><!-- #branding -->

Here is the css for the stuff inside: 这是里面的东西的CSS：

.header_nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 400px;
}

#branding img {
    height: auto;
    margin-bottom: -30px;
    width: 34%;
}

.header_nav {
    background: none repeat scroll 0 0 #F3F3F3;
    float: left;
}

Answer 1

You want the divs inside header_nav to float, not header nav itself. 你希望header_nav中的div浮动，而不是头文件nav本身。

.header_nav .head { float: left; }

Then add a break with clear both afterwards 然后添加一个明确的休息时间

<header id="branding" role="banner">
        <div class="header_nav">
          <div class="head">           </div>
          <div class="head">             </div>  
          <br style="clear: both;"/>
        </div>
</header><!-- #branding -->

Answer 2

Floats and clearing are a bear - here's how I get around it (this isn't the cleanest, but it works). 浮动和清理是一个熊 - 这是我如何绕过它（这不是最干净，但它的工作原理）。

First, you need to use float: left; 首先，你需要使用float：left; for both divs. 两个 div。 Also, you can get later elements to line up better if you go: 此外，如果你去，你可以让后面的元素更好地排队：

<div id="header_nav">
<div class="head" style="float:left">...</div>
<div class="head" style="float:left">...</div>
<br style="clear:both"/>
</div>

Again, the use of a break isn't the best (there's better ways, but I can't get them to work consistently since I'm also somewhat novice), and definitely use CSS and not inline styling. 再次，使用休息不是最好的（有更好的方法，但我不能让它们一致地工作，因为我也有点新手），并且肯定使用CSS而不是内联样式。

Edits: I misunderstood you wanting two "head" classes to float - changed it but was beaten to the punch. 编辑：我误解了你想要两个“头”类浮动 - 改变它但被击败了。

Answer 3

Take out the clear:both. 拿出明确的：两者。 It's what breaks the float. 这是打破浮动的原因。 Clear:both means "I don't want anything to be on my left or right sides" 明确：两者都意味着“我不希望任何东西在我的左侧或右侧”

无法获得两个div来水平对齐

问题描述

3 个解决方案

解决方案1
1 2012-01-14 00:10:10

解决方案2
1 已采纳 2012-01-14 00:10:56

解决方案3
0 2012-01-14 00:06:30

无法获得两个div来水平对齐

问题描述

3 个解决方案

解决方案1 1 2012-01-14 00:10:10

解决方案2 1 已采纳 2012-01-14 00:10:56

解决方案3 0 2012-01-14 00:06:30

解决方案1
1 2012-01-14 00:10:10

解决方案2
1 已采纳 2012-01-14 00:10:56

解决方案3
0 2012-01-14 00:06:30