Как сделать divs горизонтальными?

Question

, поэтому я создал 3 divs, каждый из которых действует как навигация, однако эти divs стек вертикально, как я могу сделать так, чтобы они складывались горизонтально? Вот код;

HTML;

<div class="link"> 
    <!--nav-1-->   
    <div id="showmenu1" class="font-white">Click Here</div> 
     <div class="menu1" id="font-white" style="display: none;">This is all some random text!</div> 
    <!--nav-2--> 
    <div id="showmenu2" class="font-white">Click Here</div> 
     <div class="menu2" id="font-white" style="display: none;">This is all some random text!</div> 
    <!--nav-3--> 
    <div id="showmenu3" class="font-white">Click Here</div> 
     <div class="menu3" id="font-white" style="display: none;">This is all some random text!</div> 
</div> 

CSS;

.link { 
display: inline; 
padding: 2px; 
letter-spacing: 6px; 
text-align: center; 
} 

Answer 1

насчет float:leftinline-block или. Как в примерах здесь.

.link div{float:left;} 

DEMO float:left

или

.link div{display:inline-block;} 

DEMO inline-block

Answer 2

Просто добавьте display: inline к элементам DIV:

.link div { 
    display: inline; 
} 

Fiddle: http://jsfiddle.net/ZyN84/

Кроме того, display: inline в .link класса не является необходимым, если вы не планируете иметь емкость от дивы выровненный с другими элементами в той же манере:

Fiddle: http://jsfiddle.net/ZyN84/1/

Answer 3

Добавлен это ваш CSS

.font-white 
{ 
    display: inline-block; 
    float:left; 

} 

Изменено это в CSS:

.link { 
    display: inline-block; 
} 

Выход:

Working Fiddle