javascript - 带 Glyphicon 的按钮比带文本的按钮小

Question

我有当前页面(按钮中的字形图标作为下载按钮)。

如图所示，带有字形的最后一列并没有完全对齐。我尝试用按钮中的“测试”替换字形，它们似乎完美对齐。

这是与该列的其中一个按钮相关的代码行。

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status"  onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';

如何让第一张图片中带有字形的按钮像第二张图片中的按钮一样对齐？我尝试使用填充，但它看起来不是一个好的解决方案。

下面是带有填充的相同代码。

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status" style = "padding: 0.625vw;" onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';

Answer 1

尝试添加一些填充/字体大小/行高。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<button style="padding:5%;font-size:20px" type="button" class="btn btn-default"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button>