html - 你如何实现这种向后的 div 效果？

标签 html css

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 7 年前。

如何让文本向后而不是向前？

看看下面这两张图...

通常，我会创建一个无宽度 和white-space: nowrap 的div，以创建向前移动的文本。请注意，两张图片的箭头位于同一位置，但第二张图片的文本向后移动得更多。 如何使用 CSS 实现同样的效果？

最佳答案

您可以在一系列子元素上使用右浮动来做到这一点:

span {
    float: right;
}

<div>
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
    <span>Text 4</span>
    <span>Text 5</span>
</div>

或者使用direction:rtl:

div {
    direction: rtl;
}
span {
    direction: ltr;
    display: inline-block;
}

<div>
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
    <span>Text 4</span>
    <span>Text 5</span>
</div>

关于html - 你如何实现这种向后的 div 效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37706362/

相关文章：

jquery - 从左向右滑动 div，但不是从页面左侧滑动？