我有两个 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>
我想将它们并排放置,并在它们之间留出空间。
最佳答案
您可以使用 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>
关于html - 包含选项卡的 div block 和常规 div block 。并排放置,它们之间有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7802565/