Question

我正在尝试更改此按钮集合以包裹在屏幕的右边缘。目前，他们不尊重屏幕的右边界，他们只是继续离开边缘（他们无论如何都不可见）。如何强制这些按钮自动换行到表格中的新行？屏幕重新调整大小，所以我不能静态设置它们。

感谢。

<td>    
<table class="clsActionTable">
    <tr>
        <td style="text-align:center;">
            <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
            <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
            <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
            <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
        </td>
    </tr>
</table>

和CSS ...

.clsActionTable
{
    width: 100%;
    color: white;
    font-size: smaller;
}

.clsActionButton
{
    width: 128px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
width:100%;
background-color: #4E5A81;
color: White;
}

Answer 1

您在IE9中没有看到它换行的原因是因为原始代码http://jsfiddle.net/VdBGe/会自动进入兼容模式。如果您取消检查并将其恢复到标准模式，您将看到它换行。它包装IE8 + 9但不包括IE7。

要使用原始代码将其包装在IE7中，您需要将按钮包裹在div中并设置width:100%。实例：http://jsfiddle.net/VdBGe/1/

<强> HTML：

<td style="text-align:center;">
    <div id="btnwrap">
        <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
        <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
        <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
        <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
    </div>
</td>

<强> CSS：

#btnwrap{
    width: 100%;
}

Answer 2

假设这些按钮是漂浮的＆amp;显示块。我推荐以下内容。

从<td>
同时删除float和display：阻止按钮（如果它们具有这些属性）
要正确对齐它们，只需给出文本align-right

希望这是有道理的

Answer 3

    <table class="clsActionTable">
        <tr>
            <td style="text-align:center;">
                <button class="clsActionButton moveright" id="idAddButton" onclick="idAddButton_onclick();">Add</button>

                <button class="clsActionButton moveright" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>

                <button class="clsActionButton moveright" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>

                <button class="clsActionButton moveright" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>

            </td>
        </tr>
    </table>

和css

.moveright {
    float: right;
}


.clearfix:after {
   content:"\0020";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   overflow:hidden;
}
.clearfix{display:block;}

如何在TD元素中包含多个按钮

3 个答案: