0

http://jsfiddle.net/D2RLR/122/

次のことを達成する必要があります。

  • 親の順序付きリスト/定義リスト内の入力を含む

  • 矢印ボタンの右端を各テキスト入力の右端と同じ高さに配置します (これにより、入力を部分的にカバーします。後でこれらを非表示にし、jQuery を使用してホバー時に表示します)

    HTML

<div class="container">
<div class="row-fluid">
<div class="span4">
  <form id="" class="well sidebar-nav">
    <dl>
        <dt><input type="text" class="counter nospace" name="myList_name" id="myList_name"/></dt>
        <dd>
            <ol>
                <li><input type="text" name="myList_item_1" class="counter box" id="myList_item_1" /><div id="myList_chart_1" class="chart"><a class="btn" href="#">&uarr;</a><a class="btn" href="#">&darr;</a></div></li>
                <li><input type="text" name="myList_item_2" class="counter box" id="myList_item_2" /><div id="myList_chart_2" class="chart"><a class="btn" href="#" style="z-index:0">&uarr;</a><a class="btn" href="#">&darr;</a></div></li>
                <li><input type="text" name="myList_item_3" class="counter box" id="myList_item_3" /><div id="myList_chart_3" class="chart"><a class="btn" href="#">&uarr;</a><a class="btn" href="#">&darr;</a></div></li>
                <li><input type="text" name="myList_item_4" class="counter box" id="myList_item_4" /><div id="myList_chart_4" class="chart"><a class="btn" href="#">&uarr;</a><a class="btn" href="#">&darr;</a></div></li>
                <li><input type="text" name="myList_item_5" class="counter box" id="myList_item_5" /><div id="myList_chart_5" class="chart"><a class="btn" href="#">&uarr;</a><a class="btn" href="#">&darr;</a></div></li>
                </ol>
        </dd>
    </dl>
  </form>
  </div>
</div>
</div>


CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.sidebar-nav {
padding: 9px 0;
}
.nav {
  list-style: decimal;
}
.counter {
  width: 100%;
}
dt {
  margin-left: 34px;
}
form dl dd ol {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
}

#myList_item_1, #myList_chart_1 { top: 0; }
#myList_item_2, #myList_chart_2 { top: 36px; }
#myList_item_3, #myList_chart_3 { top: 72px; }
#myList_item_4, #myList_chart_4 { top: 108px; }
#myList_item_5, #myList_chart_5 { top: 144px; }

ol li {
  margin-bottom: 18px;
  z-index: 0;
}
.chart {
  width: 58px;
  position: absolute;
  top: 0;
  z-index: 1;
  margin-left: 100%;
  margin-right: 0;
}
4

1 に答える 1

0

わかりました - 私はもうすぐそこにいます：

http://jsfiddle.net/D2RLR/151/

right: 0; を適用するのと同じくらい簡単でした。.chart クラスに。

私がまだ苦労しているのは、ボタンを入力に合わせることだけです。

于 2012-05-29T00:47:10.950 に答える