0

ラジオ ボタンのリスト "" を使用してタブ領域を作成しました。これらは水平方向に積み重ねられるようになりました。

タブ領域のコンテンツ領域内にリストを作成する必要があります。しかし、リストを作成すると、リストも水平になります。

UL 内の UL をターゲットにして「リセット」する方法はありますか? または、 a を使用して数字を箇条書きに変更できますか?

ここにフィドル リンクがあります: http://jsfiddle.net/SteveDavies/4Njb6/ タブ領域の CSS は次のとおりです。

  .tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
  .tabs {
    width: 670px;
    float: none;
    list-style: none;
    position: relative; 
    padding: 0;
    margin: 75px auto;

  }
  .tabs li{
    float: left;
  }
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 0px 0px 0 0;
      color: #ffffff;
      font-size: 16px;
      font-weight: BOLD;
      font-family: helvetica;
      background: #ccc;
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      clear:both;
  }
  .tabs label:hover {
    background: #adafaf;
    top: 0px;
  }

タブの 1 つの HTML のコードは次のとおりです。

<div style="clear:both;">       
<ul class="tabs">
<!--      FIND ME TAB      -->
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>

<div id="tab-content1" class="findmecontent animated fadeIn"

>

あなたが助けてくれることを願っています!

どうもありがとう

スティーブ

4

2 に答える 2

0

これが役立つかもしれないcssを追加しました。これがあなたが期待しているものであることを願っています。期待どおりの出力でない場合はお知らせください。

CSS:

.normalul h3 li,.findmecontent div ul li{
    float:none;
}

フィドルのデモ

于 2014-06-19T10:58:56.907 に答える
-1

これを追加：

.normalul{ 表示:インラインブロック; }

.normalul li { フロート: 左; クリア: 両方; }

??

于 2014-06-19T10:52:47.557 に答える