如何使div显示水平？

Question

所以我创建了3个div，每个div都用作导航，但是这些div垂直堆叠，我怎样才能使它们水平堆叠？这是代码;

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:left或inline-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;
}

小提琴：http://jsfiddle.net/ZyN84/

此外，除非您打算让div的容器以相同的方式与其他元素对齐，否则display: inline类中的.link是不必要的：

小提琴：http://jsfiddle.net/ZyN84/1/

Answer 3

将此添加到 CSS

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

}

在 CSS ：

中更改了此内容

.link {
    display: inline-block;
}

<强>输出：

Working Fiddle