Html Can'；不要让两个div水平对齐

我试图使

和

水平对齐。我试过使用

.header\u nav{
浮动：左；
明确：两者皆有；
}

但它似乎不起作用

您可以在以下位置查看实际页面：

谢谢你的帮助

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

---

拿出明确的答案：两者都有。这就是打破浮子的原因。清楚：两者都表示“我不希望任何东西在我的左边或右边”

您希望收割台导航内的div浮动，而不是收割台导航本身

.header_nav .head { float: left; }

然后添加一个断点，并在其后清除两个断点

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

浮动和清除是一个难题——以下是我如何避开它的方法（这不是最干净的，但它是有效的）

首先，您需要使用float:left；对于两个div。此外，如果您执行以下操作，则可以让后面的元素排列得更好：

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

...
...

再说一次，使用break并不是最好的（有更好的方法，但我不能让它们一直工作，因为我也是新手），而且肯定使用CSS而不是内联样式

---

编辑：我误解了你想要两个“head”类浮动-更改了它，但被击败了。

和

？你是说

.head

和

.head

？照你说的做了，导航条还在徽标下面。你一定是在什么地方出错了。这是你接受的答案。很高兴你让它工作了。

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