多个复选框对齐

时间:2013-08-08 11:39:43

标签: html css

我想修复多个复选框的位置。我想要坐标X = 340 Y = 250的第一个复选框。

HTML:

<div class="checkboxes">Select which contacts to display :
    <table>
        <tr>
            <td data-bind="foreach: viewModel.mailAddresses() ">
                <label for="CheckBoxOne">
                    <input id="CheckBoxOne" type="checkbox" data-bind="attr: { value: $data }, checked: viewModel.ui.CheckedEmails" /> <span data-bind="text: $data"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td data-bind="foreach: viewModel.ui.Options() ">
                <label for="CheckBoxTwo">
                    <input id="CheckBoxTwo" type="checkbox" data-bind="attr: { value: $data }, checked: viewModel.ui.CheckedOptions" /> <span data-bind="text: $data"></span>
                </label>
            </td>
        </tr>
    </table>
</div>

CSS代码

.checkboxes label {
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}
.checkboxes input {
    vertical-align: middle;
}
.checkboxes label span {
    text-align:center;
    vertical-align: middle;
}

没有垂直对齐的屏幕截图选择消息:

screenshot

我正在寻找的屏幕截图:

screenshot

1 个答案:

答案 0 :(得分:0)

您可以使用绝对定位来获得精确坐标:

position:absolute;
left:340px;
top:250px;

请注意,绝对定位不是可靠的跨浏览器。