Question

我有三个垂直排列的<input type="submit" />元素。前两个位于相同的<div>和<table>，但底部位于不同的<div>和<table>。我无法改变这种情况，就像在较大页面的上下文中用于UX目的一样，这只是一个片段。我的第三个按钮是额外的几个像素太低，这样三个按钮之间的间距是不一致的。

我不想做一个垃圾vertical-align: -2px或类似的东西。我想要的是了解为什么间距不一致。谢谢你的阅读。

这是一个JSFiddle示例： https://jsfiddle.net/y57wLtjb/

Answer 1

将border-spacing: 0;用于table

＆＃13;

table {						
	border-collapse: collapse;
	border-spacing: 0;
}

＆＃13;

<div id="pre-update-section">
    <table>
        <tr>
            <td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td>
            <td><label id="ajaxStatusMsg"></label></td>
        </tr>
        <tr>
            <td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td>
            <td></td>
        </tr>
    </table>
</div>
    
<div id="start-update-section">
    <table >
        <tr>
            <td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td>
            <td>
            </td>
        </tr>
    </table>
</div>

＆＃13;

垂直HTML按钮间距问题

1 个答案: