HTML-CSS：跨按钮右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12392748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML-CSS: span inside button aligning right
提问by JorgeeFG
I am having trouble with the alignment of a spancontained within a buttontag.
我在对齐标签中span包含的 a 时遇到问题button。
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
我之前已经做过类似的事情并且它奏效了。事实上，它是相同的css，但大小不同。
The problem is that the containing spanseems to be aligning to the right.
问题是包含span似乎向右对齐。
CSS:
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：
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
非常感谢！
采纳答案by JorgeeFG
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
我注意到按钮在将其调整为 10px 后仍然有一些填充。我发现没有办法设置那个空间。
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the spanand it will be centered.
我所提出的将它居中的解决方案是删除按钮的高度和宽度，因为它会扩展以包裹span并且它会居中。
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
对于一些奇怪的事情，它适用于小按钮。但是对于像 30px x 50px 这样的更大的按钮，设置高度和宽度就可以了，或者至少如果有一些填充很难注意到。
回答by Matt Johnston
Simple fix - seems like the button has a padding by default. Just set it to 0:
简单的修复 - 默认情况下按钮似乎有填充。只需将其设置为 0：
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
现在您可以随意定位 - 如果您想移动它，可以为跨度添加一个边距。
Hope that helps you,
希望能帮到你
回答by j08691
In your #closePreviewBtnrule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
在您的#closePreviewBtn规则中，删除right:0;. 将位置设置为absolute 并将right 设置为0 会将元素从文档流中取出，并将其定位到尽可能靠右的位置。
