【问题标题】:Inline-Element Float-Right of `div``div` 的 Inline-Element Float-Right
【发布时间】:2010-03-12 02:13:08
【问题描述】:

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

我看到float="right" 应用于span 以右对齐其位置。但是,对我来说,这在语义上似乎不正确,因为浮点数应该在 container element 的左侧或右侧移动 "boxes" or block elements

我对@9​​87654324@ 的理解是错误的,还是在CSS-container 中有另一种右对齐inline elements 的方法。

【问题讨论】:

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

标签: css dom containers css-float inline


【解决方案1】:

float: right 完全可以应用于所有元素,块级或内联,无论是语义上还是根据规范(据我所知)都没有关系。

如果您想在不使用float 的情况下右对齐某些内容,那么margin-right: 90%; 的可能性是存在的(假设您知道它的右对齐内容适合/反对其他 10%。

或者direction: rtl;,但这从来没有像我认为的那样有效,而且它可能会使事情复杂化。

position: absolute; right: 0; 会按照你的需要做(但它会从文档流中删除,并且它会被定位在它的第一个具有定义 position: relative; 的父元素(或至少定义 position )。

您可能可以使用text-align: right,但这似乎是一个非常简单的解决方案,我相信您已经尝试过了。

如果您能提供一个用例、一些代码和您预期的最终结果的指示,我们或许可以为您提供更多帮助。

【讨论】:

    【解决方案2】:

    浮动元素会自动将其放入一个盒子中。 (参见:http://css.maxdesign.com.au/floatutorial/introduction.htm)但是,它在语义上没有任何不正确之处。语义并不规定什么应该显示为块,什么应该内联显示——这是我们可以任意声明的原因之一。 (当您开始不按顺序说出单词时,它肯定会变得混乱 - 但我怀疑这就是您在这里所说的,因为我无法想象您想要这样做的情况并且让它保持内联。)

    此外,如果您需要对齐一些独立于普通文本流的内联文本(这是浮点数所做的),那么无论如何您确实希望将其显示为块。如果它真的是一个内联元素,那么你只需要text-align:right——任何你需要的浮点数或声明的位置都已经被视为块元素,所以这样声明没有错。

    【讨论】:

    • 但不建议使用不带宽度的 Float,在此我希望我的宽度为 = 内容,因此是内联元素?所以,如果我的元素是一个带有 Float 的块元素,那么指定的宽度不会有伤害吗?
    • @Rajat 没有指定宽度意味着默认情况下您的浮动将缩小到最长单词的大小。您可以使用 white-space:nowrap 覆盖该行为 - 然后它将与您的内容一样宽。 (因此,如果需要包装,请务必放入 BR。)
    猜你喜欢
    • 1970-01-01
    • 2018-06-24
    • 1970-01-01
    • 2014-06-18
    • 1970-01-01
    • 1970-01-01
    • 2017-02-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多