CSS浮动Div&Alignment
问题描述:
我想创建一个控件,其中包含两个列表框添加/删除按钮将项目从一个列表移动到另一个列表。通常我会使用表格来做到这一点,但我试图遵循css标准并使用div。CSS浮动Div&Alignment
我有列表框完全对齐,但我无法弄清楚如何设置它们之间的按钮。
这是我的HTML(更新以显示渲染HTML):
<div id="dealsummary-ladderlist">
<form action="/Reporting/DealSummaryComparison" method="post">
<div id="available">
<div><strong>Available</strong></div>
<div id="available-items">
<select id="ItemsToSelect" multiple="multiple" name="ItemsToSelect" size="30">
<option value="16">Item 1</option>
<option value="17">Item 2</option>
<option value="21">Item 3</option>
<option value="22">Item 4</option>
<option value="23">Item 5</option>
<option value="24">Item 6</option>
<option value="25">Item 7</option>
</select>
</div>
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<div><strong>Selected</strong></div>
<div id="selected-items">
<select id="ItemsToDeselect" multiple="multiple" name="ItemsToDeselect" size="30"></select>
</div>
</div>
<div style="clear:both;"></div>
<br /><br />
<center>
<p>
<input type="submit" value="Generate Report" />
</p>
</center>
</form>
</div>
这是我对CSS:
#add-remove {
/* want to center on page */
float: left;
width: 10%;
}
#add-remove div {
/* want to add even spacing between buttons */
}
#available {
float: left;
width: 45%;
}
#selected {
float: right;
width: 45%;
}
#available #available-items,
#selected #selected-items {
margin: 1em 0 0 0;
}
#available #available-items select,
#selected #selected-items select {
width: 100%;
font-size: 10pt;
}
我将如何实现箭头的中心,甚至间距按钮使用CSS?
答
如果您知道<div id="add-remove">
元素的精确宽度和高度,你可以包住整个事情的相对定位<div>
和使用绝对定位切缘阴性,像这样:
<div id="relativeWrapper"> <!-- added this -->
<div id="available">
<!-- ... snip ... -->
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<!-- ... snip ... -->
</div>
<div style="clear:both;"></div>
</div>
<!-- ... etc ... -->
随着CSS:
div#relativeWrapper {
position: relative;
}
div#add-remove {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
margin-left: -40px;
height: 64px;
margin-top: -32px;
}
同时设置top
和left
到50%
和margin-left
到width
和数值的一半到height
的值的一半将水平和垂直地居中其相对父母内的绝对定位元素。
垂直居中难以实现;您可以使用display: inline-block; vertical-align: middle;
,但所有浏览器都不支持inline-block
。或者,使用display: table-cell; vertical-align: middle;
倾向于工作。
顺便提一句,<center>
元素已弃用。改为使用<div style="text-align: center;">
或简单地使用<p style="text-align: center;">
。
您可以将HTML更改为在浏览器中查看源代码时显示的内容吗?代码中的[jsFiddle demo](http://jsfiddle.net/)也有帮助。 – thirtydot