2

Foundation CSSを使用して、含まれているタブをいくつか作成しています。http://foundation.zurb.com/docs/ui.php#simpleContained1

タブコンテンツ内に多くのdivが必要なため、li要素内にdivを配置しています。リスト内のdivは許可されていますか？

ただし、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

4

1 に答える 1

0

これが例です

すべてのdivを1つのメインdiv （buttons_backdiv）の下に配置します。メインdivを閉じる前に、フロートをクリアする必要があります。したがって、クラスclearfloatで1つの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>

</ p>

Cssは：

.buttons_backdiv { width:100%;}
.clearfloat { clear:both;}
于 2012-05-22T04:34:57.587 に答える