Question

我有两个div块，一个带标签，一个带常规。这是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>

Answer 2

是的，float:left按照sandeep的说法完成工作，但要小心IE6中的Float/Margin bug。我知道现在IE6几乎不在桌面上，但以防万一。

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

2 个答案: