需要将两个块在文本的右侧对齐 - 可能吗？
一直在使用精灵优化一些东西并遇到这个问题...我需要将两个块与文本的右侧对齐，但无论我做什么，它们都会在其下方的新行上左对齐。使用position:absolute似乎在我的编辑器中有效，但在发布时却无效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
a.facebook{margin:0 5px 0 0;float:left;display:block;width:30px;height:30px;background:url(social.png) no-repeat 0 0;background-position:0px -38px;overflow:hidden;text-indent:-10000px;font-size:0px;line-height:0px;}
a.twitter{margin:0 5px 0 0;float:left;display:block;width:30px;height:30px;background:url(social.png) no-repeat 0 0;background-position:-30px -38px;overflow:hidden;text-indent:-10000px;font-size:0px;line-height:0px;}
</style>
</head>
<body>
<div>this is a test
<a href="#" onclick="window.open('http://test.com')" title="Find us on Facebook!" class="facebook">Find us on Facebook!</a>
<a href="#" onclick="window.open('http://test.com')" title="Find us on Twitter!" class="twitter">Find us on Twitter</a></div>
</body>
</html>
Been optimizing some stuff using sprites and ran into this problem... I need the two blocks to be aligned to the right of the text, but no matter what I do they start left aligned on a new line underneath it. Using position:absolute appears to work in my editor, but when publishing it does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
a.facebook{margin:0 5px 0 0;float:left;display:block;width:30px;height:30px;background:url(social.png) no-repeat 0 0;background-position:0px -38px;overflow:hidden;text-indent:-10000px;font-size:0px;line-height:0px;}
a.twitter{margin:0 5px 0 0;float:left;display:block;width:30px;height:30px;background:url(social.png) no-repeat 0 0;background-position:-30px -38px;overflow:hidden;text-indent:-10000px;font-size:0px;line-height:0px;}
</style>
</head>
<body>
<div>this is a test
<a href="#" onclick="window.open('http://test.com')" title="Find us on Facebook!" class="facebook">Find us on Facebook!</a>
<a href="#" onclick="window.open('http://test.com')" title="Find us on Twitter!" class="twitter">Find us on Twitter</a></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我有这个问题，我认为您正在寻找
float:right，但请注意，浮动相对于跟随它们的元素浮动，因此您需要将文本之前的链接。编辑：更多数据
如果您希望将块插入到其他元素中，就好像它们是文本的一部分一样，您应该将其设置为
display:inline-block（在 IE6 中，这仅适用于默认情况下内联的元素）。但随后它们会出现在插入的位置，而不是浮动。If I got the question, I think you're looking for
float:right, but notice that floats float relatively to the elements that follow them, so you need to place the links before the text.edit: more data
If you want blocks to be inserted into other elements as if they were part of the text, you should make their
display:inline-block(in IE6 this only works for elements that are inline by default). But then they'll appear in the position they're inserted into, not floating.