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之前，我们必须清除浮动。所以添加一个div clearfloat 。

操作员和设置操作员

希腊字母和其他符号

操作和箭头

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

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

1 个答案: