如何在同一行html上对齐两个元素

Question

我有一个像jsfiddle这样的例子，我有一个<a>元素的列表。在每个<a>元素中，我有一个<span>和一个<button>。我想要做的是我想对齐右边的按钮，我这样做是通过添加类pull-right并且它工作正常

<button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>

，我想在同一行上对齐span和button，但如果我在跨度内有一个很长的名称，那么按钮就不再与跨度。我该如何解决这个问题？

Answer 1

在样式中使用position: absolute;，并将right样式按钮设置为0。根据您的父母div，这会将您的按钮置于绝对位置。

.btt {
  position: absolute;
  right: 0;
}

Live example

Answer 2

您可以将宽度和显示属性设置为span元素，如下所示：

.surveySummaryList a span {
      width: calc(100% - 40px);
      display: inline-block;
      word-break: break-all;
}

并为您的按钮宽度添加规则，如下所示：

.btt{
    width: 30px;
}

我更新了FIDDLE

Answer 3

这是我遇到过几次的问题，通常我所做的是决定允许该值的最大长度，然后用省略号截断。

这取决于你，但我认为这是一个很好的选择，因为它是防御性编码，无论价值多少，都能保持显示的整洁。

以下是您可以添加到范围的示例CSS类：

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}