html - 增加 Foundation CSS 中包含的选项卡的高度

Question

我正在使用 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;
}

结果是这样的

http://tinypic.com/view.php?pic=118n4e8&s=6

Answer 1

这是 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;}