html - 包含选项卡的 div block 和常规 div block 。并排放置，它们之间有空间

Question

我有两个 div block ，一个带标签，一个普通的。这是 html:

<div id = "container"></div>
<div>
<ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>

    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>

我想将它们并排放置，并在它们之间留出空间。

http://i.stack.imgur.com/QPv2I.png![]dsd 1

Answer 1

您可以使用 float 或 inline-block 来实现此类功能。

CSS:

.tabs, .tab_container{
 float:left;
}

也许您还需要阅读这些文章:

http://css-tricks.com/795-all-about-floats/

http://css-tricks.com/37-the-how-and-why-of-clearing-floats/

编辑:

根据下面的评论写这个:

.tabs, .tab_container{
     display:inline-block;
     white-space:normal;
    }

& 将 white-space 给它的 parent

.parent{white-space:nowrap}

HTML :

<div class="parent">
    <ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>

    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>