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="#">↑</a><a class="btn" href="#">↓</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">↑</a><a class="btn" href="#">↓</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="#">↑</a><a class="btn" href="#">↓</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="#">↑</a><a class="btn" href="#">↓</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="#">↑</a><a class="btn" href="#">↓</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;
}
答案 0 :(得分:0)