2つのdivを水平に整列できません

<head>と<head>を水平に整列しようとしています。私は.header_nav { float:left; clear:both; }を使ってみましたが、うまく動作していないようです。2つのdivを水平に整列できません

あなたはあなたの助けのための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; 
}

出典

2012-01-14 novicePrgrmr

「」と「」？あなたは '.head'と' .head'を意味しますか？ – Sparky

はい............... – novicePrgrmr

フロートとクリアはクマです - ここに（これはクリーンではありませんが、それは動作します）私はそれを回避する方法です。

まず、float：left;を使用する必要があります。 の場合は両方とも divsです。あなたが行く場合にも、あなたはより良い並ぶように、後の要素を取得することができます。

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

ここでも、ブレークを使用することはできません最高（そこより良い方法ですが、私は彼らが以来一貫して動作させることはできません私もやや初心者です）、間違いなくCSSを使用し、インライン・スタイリングはしません。

編集：2つの「頭部」クラスを浮かべて欲しいと誤解しましたが、それを変更しましたが、パンチに殴られました。

出典

2012-01-14 00:10:56 MrDunham

は明らかに取り出します。フロートを壊すのはそれです。クリア：両方の意味あなたが浮いてheader_nav内部divをしたい

出典

2012-01-14 00:06:30

「私は私の左または右側にあることを何もしたくない」ではなく、自分自身をNAVヘッダー。

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

でブレークを追加

出典

2012-01-14 00:10:10 mrtsherman

あなたの言ったことは、nav barはまだロゴの下にあります。 – novicePrgrmr

あなたはどこかで間違いを犯したはずです。これは、あなたが受け入れたものと同じ答えです。あなたがうまく働いてうれしい。 – mrtsherman

2つのdivを水平に整列できません

答えて

関連する問題