Bootstrap CSS - 对齐绝对定位的按钮和输入

Question

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

Answer 1

好的 - 我快到了：

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

这就像申请正确一样简单：0;到 .chart 类。

我唯一仍在努力的是将按钮与输入对齐。