html - 如何使元素 float :right without affecting the vertical alignment?

Question

我有一个带有一些文本的按钮和一个用 CSS 制作的插入符号。我希望插入符号向右浮动，在按钮的一侧。但是，当我这样做时，无论是使用 CSS 的 float:right(还是使用 Bootstrap 的 pull-right)，垂直对齐都会发生变化，并且插入符位于文本行。这是我的代码:

<button style="width:150px">
Button Text <span style="float:right" class="caret"></span>
</button>

这是我在使用和不使用 float:right 时所看到的:

Answer 1

你不能 float 一个内联 block 元素。为了让按钮的插入符显示在更靠右的位置以及相同的高度，请尝试简单地设置 position: relative 并结合负右侧边距:

<button>
  Button Text <span style="position: relative, margin-right: -25px;" class="caret"></span>
</button>

我创建了一个 BootPly 来演示 here .

希望对您有所帮助! :)