`div` 的内联元素右浮动

Question

我想将内联元素右对齐到div的右侧。

我看到过在span上应用float="right"来右对齐其位置。但是，对我来说，这似乎在语义上不正确，因为浮动是用来移动容器元素左侧或右侧的"框"或块级元素。

我的Float理解是否错误，或者有没有其他方法可以将内联元素右对齐到CSS容器中。

- Rajat

---

我在使用Span时遇到的另一个问题是，我们在没有指定宽度的情况下在Span上使用float:right，这又违反了Float的要求。基本上，我想利用内联元素的拉伸属性，因为它会采用内容的宽度，而在我的情况下，内容是动态的。将其转换为DIV会失去这个优势。 - Rajat

Answer 1

“float:right”可以应用于所有元素，不管是块级的还是内联的，无论从语义上还是按规范来说（就我所知），都没有问题。

如果您想在不使用“float”的情况下右对齐某些内容，则有可能使用“margin-right: 90%;”（假设您知道要对齐的内容占另外10%）。

或者使用“direction: rtl;”，但它通常不像我想象的那样工作，并且可能会使事情变得更复杂。

“position: absolute; right: 0;”将符合您的需求（但它将从文档流中删除，并且将定位到具有定义的“position: relative;”（或至少定义了“position”）的其父元素中的第一个元素）。

您可能可以使用“text-align: right”，但这似乎是如此简单的解决方案，我相信您已经尝试过了。

如果您能提供使用案例、代码和期望的最终结果，我们可能能更好地帮助您。

- David Thomas

Answer 2

浮动一个元素会自动将其转换为一个盒子。(参见: http://css.maxdesign.com.au/floatutorial/introduction.htm) 然而，这并没有什么语义上的错误。语义不决定应该显示为块状和应该显示为行内状的内容 - 这是我们可以随意声明的原因之一。(当你开始打乱单词的顺序时，它肯定会变得混乱 - 但我想你在这里讨论的不是这个问题，因为我无法想象有一种情况，你想要做到那个程度并且仍然保持行内状态。)

此外，如果您需要对独立于正常文本流程的内联文本进行对齐(这就是浮动所做的事情)，您确实希望将其显示为块状元素。如果它真的是一个内联元素，那么你只需要text-align:right - 任何你需要浮动或已经在其中声明位置的元素，你已经把它们当作块状元素来处理了，所以将其声明为这样也没有问题。

- user241244

---

但是不建议使用没有宽度的Float，而且我希望我的宽度等于内容，因此内联元素呢？那么，如果我的元素是带有Float的块级元素，没有指定宽度会有影响吗？ - Rajat

@Rajat 如果没有指定宽度，那么默认情况下，您的浮动元素将缩小到最长单词的大小。您可以使用 white-space:nowrap 来覆盖这种行为--然后它将与您的内容一样宽。（因此，请确保如果需要换行，则插入 BR 标签。） - user241244