Question

我想让<head>和<head>水平对齐。我尝试过使用.header_nav { float:left; clear:both; }，但它似乎没有用。

您可以在http://www.bolistylus.com

查看实际页面

感谢您的帮助！

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

这里面是内容的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

你希望header_nav中的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 -->

Answer 2

浮动和清理是一只熊 - 这就是我如何绕过它（这不是最干净的，但它有效）。

首先，你需要使用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>

同样，休息的使用并不是最好的（有更好的方法，但我不能让它们一直工作，因为我也有点新手），并且绝对使用CSS而不是内联样式。

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

Answer 3

取出明确的：两者。这是打破浮动的原因。清楚：两者都意味着“我不希望任何东西出现在我的左侧或右侧”

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

3 个答案: