引导CSS - 对齐绝对定位按钮和输入

http://jsfiddle.net/D2RLR/122/引导CSS - 对齐绝对定位按钮和输入

我需要实现以下目标：

包含父有序列表/定义列表

有权内输入箭头按钮的边缘与每个文本输入的右边缘齐平（从而部分覆盖输入，稍后我将隐藏这些并使用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; 
}

来源

2012-05-28 user1405195