Question

我在格式化某些HTML时出现问题。基本上我有大量的列表框，一旦加载页面就会被隐藏，并且暂时将它们放在HTML表中。我知道这不是一个好习惯，但这是我收到它们的方式，因为有100多个，我无法真实地改变他们的HTML代码。

我想要图片右侧的</hr>和两个按钮，在列表框下显示。

以下是代码的jsfiddle。

如何将这些按钮显示在下方，无论列表框占用的高度如何？即它们总是出现在下面。

Answer 1

您只需告诉浏览器忽略div周围table的浮动设置：

#divButtons{
    clear:both;
}

#divButtons input[type="submit"]{
    float:right;
}

请注意，此解决方案会“反转”按钮的显示顺序。您可能需要更改其在HTML中的位置。

Answer 2

或类似的东西

#divButtons{ width:100%; float:left }

http://jsfiddle.net/9BBKp/

Answer 3

Here is demo

试试这个：

<form>
    <div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>

        <select name="cmbProducts" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;cmbProducts\&#39;,\&#39;\&#39;)&#39;, 0)" id="cmbProducts" style="width:250px;"></select>
    </div>
    <div style="padding-top: 50px;">
        <hr />
        <div>
            <div class="selection-panel">
                <table>
                    <tr>
                        <th>Test</th>
                    </tr>
                    <tr>
                        <td>
                            <select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="selection-panel">
                <table>
                    <tr>
                        <th>Test</th>
                    </tr>
                    <tr>
                        <td>
                            <select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <hr />
    </div>
    <div id="divButtons" style="text-align: center;">
        <input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
        <input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
    </div>
</form>

和css：

.list-box {
    width: 250px;
}
.selection-panel {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    align-content: center;
    text-align: center;
}
#divButtons {
    float:right;
    clear:both;
}

无法在其他元素下获取元素

3 个答案: