1

我在对齐标签中span包含的 a时遇到问题。button

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

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

在此处输入图像描述

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>

非常感谢！

4

3 回答 3

3

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

#closePreviewBtn {
  padding: 0;
}

现在你可以随意定位——如果你想移动它，可能会在跨度上添加一个边距。

希望对你有帮助，

于 2012-09-12T18:32:20.867 回答
0

在您的#closePreviewBtn规则中，删除right:0;. 将位置设置为绝对位置并将右侧设置为零会将元素从文档流中取出，并将其放置在尽可能靠右的位置。

jsFiddle 示例

于 2012-09-12T18:36:32.927 回答
0

我注意到该按钮在将其调整为 10 像素后仍有一些填充。我发现没有办法关闭那个空间。

我发现将其居中的解决方案是删除按钮的高度和宽度，因为它会展开以包裹span并居中。

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

于 2012-09-12T19:26:25.020 回答