Question

我有一张4x4的radiobuttons表。在第一行（额外的行超过4x4）我想要一个水平居中的按钮。我已经尝试了colspan等，但所有仍然将radiobutton留在像其他列一样的列中，因而不受影响。

Answer 1

强制性无表答案：

<div>
    <div class="center"><input type='button' value='hello' /></div>
    <ul class="radioList">
        <li>
            <label for="radio1">
                <input type="radio" id="radio1" />
                Checkbox 1</label>
        </li>
        <li>
            <label for="radio2">
                <input type="radio" id="radio2" />
                Checkbox 2</label>
        </li>
        <li>
            <label for="radio3">
                <input type="radio" id="radio3" />
                Checkbox 3</label>
        </li>
        <li>
            <label for="radio4">
                <input type="radio" id="radio4" />
                Checkbox 4</label>
        </li>
    </ul>   
</div>

.center { text-align:center; }
.radioList {
    list-style:none;
    width:100%;
}
.radioList li {
    float:left;
    width:25%;
}

http://jsfiddle.net/Amudt/

Answer 2

http://jsfiddle.net/EJbny/

<table style='width:100%;' border=1>
<tr>
    <td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>

Answer 3

喜欢这个？只需在顶行使用CSS和text-align:center规则即可。这是一个 jsFiddle example 。

<table>
    <tr>
        <td colspan="4" style="text-align:center"><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
</table>

抵消表格单元格

3 个答案: