CSS 浮动 Div's &结盟

Question

我正在尝试创建一个控件，其中包含两个带有添加/删除按钮的列表框，用于将项目从一个列表移动到另一个列表。通常我会使用表格来完成此操作，但我尝试遵循 css 标准并使用 div。

我的列表框完美对齐，但我不知道如何设置它们之间的按钮。

这是我的 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 实现箭头按钮的居中和均匀间距？

Answer 1

如果您知道

元素的精确宽度和高度，则可以将整个元素包装在相对定位的

< 中/code> 并使用带负边距的绝对定位，如下所示：

<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 和 margin-top 为 height 值的一半将使绝对定位元素在其相对父元素中水平和垂直居中。

垂直居中很难实现；您可以使用 display: inline-block; Vertical-align: middle;，但并非所有浏览器都支持 inline-block。或者，使用 display: table-cell; Vertical-align: middle; 往往会起作用。

顺便说一句，

元素已被弃用。使用

或简单地使用

代替。