我正在使用 Foundation CSS 创建一些包含的选项卡。 http://foundation.zurb.com/docs/ui.php#simpleContained1
因为我在选项卡内容中需要很多 div，所以我将 div 放在 li 元素中。 Is div inside list allowed?
但是 div 没有包含在选项卡内容的边框内。它在它外面。我们怎样才能使边框包含 div。
我包括了一些代码
<dl class="tabs contained">
<dd><a href="#simpleContained1" class="active">Operators and Set Operartors</a></dd>
<dd><a href="#simpleContained2">Greek Letters and Other Symbols</a></dd>
<dd><a href="#simpleContained3">Operations and Arrows</a></dd>
</dl>
<ul class="tabs-content contained">
<li class="active" id="simpleContained1Tab">
<div id="add" class="lib-item">
Add
</div>
<div id="subtract" class="lib-item">
Sub
</div>
<div id="multiply" class="lib-item">
Mul
</div>
<div id="divide" class="lib-item">
Div
</div>
<div id="plusorminus" class="lib-item">
Plus or minus
</div>
<div id="lessthan" class="lib-item">
Less than
</div>
<div id="greaterthan" class="lib-item">
Greater Than
</div>
<div id="lessthanorequalto" class="lib-item">
Less than / Erual to
</div>
<div id="equalto" class="lib-item">
Equal to
</div>
<div id="approximately" class="lib-item">
Approx
</div>
<div id="notequalto" class="lib-item">
Not equal to
</div>
<div id="setunion" class="lib-item">
Union
</div>
<div id="subset" class="lib-item">
Subset
</div>
<div id="superset" class="lib-item">
Superset
</div>
<div id="propersubset" class="lib-item">
Proper Subset
</div>
<div id="propersuperset" class="lib-item">
Proper Superset
</div>
<div id="inset" class="lib-item">
Inset
</div>
<div id="notinset" class="lib-item">
Not Inset
</div>
<div id="forall" class="lib-item">
For All
</div>
<div id="exists" class="lib-item">
Exists
</div>
<div id="emptyset" class="lib-item">
EmptySet
</div>
<div id="setcontains" class="lib-item">
Set Contains
</div>
</li>
<li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!
</li>
<li id="simpleContained3Tab">This is simple tab 3's content. It's, you know...okay.
</li>
</ul>
lib-item 是我编写的用于在选项卡内容区域内排列内容的类。
是这样的
.lib-item{
float:left;
background-color:#CCC;
width:100px;
text-align:center;
margin:5px;
}
结果是这样的
最佳答案
这是 Example
将所有 div 放在一个主 div (buttons_backdiv) 下。在关闭主 div 之前，我们必须清除 float 。所以添加一个类为 clearfloat 的 div。
<div class="buttons_backdiv"> //main div opening
<div id="add" class="lib-item">
Add
</div>
<div id="subtract" class="lib-item">
Sub
</div>
<div id="multiply" class="lib-item">
Mul
</div>
<div id="divide" class="lib-item">
Div
</div>
<div id="plusorminus" class="lib-item">
Plus or minus
</div>
<div id="lessthan" class="lib-item">
Less than
</div>
<div id="greaterthan" class="lib-item">
Greater Than
</div>
<div id="lessthanorequalto" class="lib-item">
Less than / Erual to
</div>
<div id="equalto" class="lib-item">
Equal to
</div>
<div id="approximately" class="lib-item">
Approx
</div>
<div id="notequalto" class="lib-item">
Not equal to
</div>
<div id="setunion" class="lib-item">
Union
</div>
<div id="subset" class="lib-item">
Subset
</div>
<div id="superset" class="lib-item">
Superset
</div>
<div id="propersubset" class="lib-item">
Proper Subset
</div>
<div id="propersuperset" class="lib-item">
Proper Superset
</div>
<div id="inset" class="lib-item">
Inset
</div>
<div id="notinset" class="lib-item">
Not Inset
</div>
<div id="forall" class="lib-item">
For All
</div>
<div id="exists" class="lib-item">
Exists
</div>
<div id="emptyset" class="lib-item">
EmptySet
</div>
<div id="setcontains" class="lib-item">
Set Contains
</div>
<div class="clearfloat"></div> //div float clear
</div> //main div closing
</li>
<li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!
</li>
<li id="simpleContained3Tab">This is simple tab 3's content. It's, you know...okay.
</li>
CSS 是:
.buttons_backdiv { width:100%;}
.clearfloat { clear:both;}
关于html - 增加 Foundation CSS 中包含的选项卡的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10663296/