2012-01-14 2 views
0

Я пытаюсь получить <head> и <head> для выравнивания по горизонтали. Я пробовал использовать .header_nav { float:left; clear:both; }, но он, похоже, не работает.Не удается получить два divs для горизонтального выравнивания

Вы можете проверить реальную страницу в 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; 
} 
+0

'' и ''? Вы имеете в виду '.head' и' .head'? – Sparky

+0

есть ............... – novicePrgrmr

ответ

1

поплавков и клиринг являются медведь - вот как я получаю вокруг него (это не самый чистый, но он работает).

Во-первых, вам нужно использовать 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, а не встроенный стиль.

Редактирование: Я неправильно понял, что вы хотите, чтобы два класса «головы» плавали, - изменил его, но был избит до удара.

0

Вынимают ясно: оба. Это то, что ломает поплавок. Ясно: оба средства «Я не хочу, чтобы что-то было на моей левой или правой сторонах»

1

Вы хотите, чтобы divs внутри header_nav плавали, а не заголовок 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 --> 
+0

сделал то, что вы сказали, nav bar все еще находится под логотипом. – novicePrgrmr

+1

Вы, должно быть, сделали ошибку. Это тот же ответ, что и тот, который вы приняли. Рад, что вы его работали. – mrtsherman

Смежные вопросы