[英]Vertical HTML button spacing issues
I have three <input type="submit" />
elements arranged vertically. 我有三个垂直排列的
<input type="submit" />
元素。 The top two are in the same <div>
and <table>
, but the bottom one is in a different <div>
and <table>
. 顶部的两个位于相同的
<div>
和<table>
,而底部的两个位于不同的<div>
和<table>
。 I can't change this, as it is for UX purposes in the context of the larger page from which this is just a snippet. 我无法更改此设置,因为这是出于UX目的,在较大页面的上下文中(这只是摘录)。 My third button is an extra few pixels too low, such that the spacing between these three buttons is inconsistent.
我的第三个按钮的像素太低,因此这三个按钮之间的间距不一致。
I would like to not have to do a junky vertical-align: -2px
or something like that. 我不想做
vertical-align: -2px
或类似的东西。 What I'd like is to gain some understanding as to why the spacing is inconsistent. 我想了解一下为什么间距不一致。 Thanks for reading.
谢谢阅读。
Here is a JSFiddle example: https://jsfiddle.net/y57wLtjb/ 这是一个JSFiddle示例: https ://jsfiddle.net/y57wLtjb/
use border-spacing: 0;
使用
border-spacing: 0;
for table
table
table { border-collapse: collapse; border-spacing: 0; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.