Question

我无法对span标记中包含的button进行对齐。

我之前已经做过类似的事情并且有效。事实上，它是相同的CSS，但大小不同。

问题是包含span似乎与右边对齐。

enter image description here

CSS：

#closePreviewBtn {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0;
    background: #B9DEFD;
    border-top: solid 1px #333333;
    border-left: solid 1px#333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-radius: 4px;
}

#closePreviewBtn .close {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    background: url(../imagenes/close.png) no-repeat center;
    padding: 0;
    /*right: 2px; 
    bottom: 1px;*/ //This fixes the problem but it's manual
}

HTML：

<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>

非常感谢！

Answer 1

简单修复 - 默认情况下按钮似乎有一个填充。只需将其设置为0：

#closePreviewBtn {
  padding: 0;
}

现在您可以根据需要定位 - 如果您想移动它，可以在跨度上添加边距。

希望能帮到你，

Answer 2

在#closePreviewBtn规则中，移除right:0;。将位置设置为绝对值并将右侧设置为零将使元素脱离文档流并将其尽可能地放置在右侧。

<强> jsFiddle example

Answer 3

我注意到在将其调整为10px后，按钮仍然有一些填充。我发现无法设置该空间。

解决方案我已经把它放在中心位置，它正在移除按钮的高度和宽度，因为它将展开以包裹span并且它将居中。

对于一些奇怪的事情，它适用于小按钮。但是对于像30px x 50px这样的大按钮，设置高度和宽度会很好，或者至少填充是非常难以注意到的。

HTML-CSS：按钮右侧对齐

3 个答案: