如何在同一行上對齊兩個元素html

Question

我有一個像jsfiddle這樣的示例，其中有一個<a>元素列表。 在每個<a>元素中，我都有一個<span>和<button> 。 我想做的是我想將右邊的按鈕對齊，我通過添加class pull-right做到這一點，並且效果很好

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

，並且我想將span和button對齊在同一行，但是如果跨度內有一個很長的Name，則按鈕將不再與跨度在同一行。 我該如何解決這個問題？

Answer 1

使用position: absolute; 在樣式中，將right樣式按鈕設置為0 。 根據您的父母div ，這會將您的按鈕置於絕對位置。

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

現場例子

Answer 2

您可以像這樣設置span元素的width和display屬性：

.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;
}