如何使元素浮动：正确而不影响垂直对齐？

Question

我有一个带有一些文字的按钮和一个用CSS制作的插入符号。我希望插入符号向右浮动，按钮的一侧。但是，当我这样做时，无论是使用CSS float:right（还是使用Bootstrap＆＃39; s pull-right），垂直对齐方式都会发生变化，并且插入符号位于行的顶部文本。这是我的代码：

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

以下是我在使用float:right时所看到的内容：

Answer 1

您不能浮动内联块元素。为了使按钮的插入符号在右侧和相同高度显示，请尝试将position: relative与负右侧边距一起设置：

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

我创建了一个BootPly来演示这个here。

希望这有帮助！ ：）

Answer 2

答案似乎是将插入符号嵌套在浮动元素中。

<span class="pull-right"><span class="caret"></span></span>

Answer 3

我不确定您的问题是什么，因为您没有显示类插入符号的代码。但是，我创造了一支可行的钢笔。我从其他网站借用了插入符号图标，以便您可以看到它。

library(tidyverse)

# How I read your data in, ignore since you already have your data available
df = read.table(file="clipboard", header=TRUE)
df %>%
    group_by(animal_name) %>%
    filter(age == max(age))

# Output:
Source: local data frame [8 x 2]
Groups: animal_name [3]

  animal_name   age
       <fctr> <int>
1         cat     3
2         cat     3
3         dog     4
4         dog     4
5         dog     4
6       horse     5
7       horse     5
8       horse     5

笔：https://codepen.io/wahhabb/pen/qmKNZL

Answer 4

在插入符号上使用position: absolute，在父按钮上使用position: relative。

button {
  position: relative;
}

.caret {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



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

Answer 5

保留Direct Line并使用此位代码垂直对齐：

float: right;

按钮的高度并不重要，它始终是垂直居中的。