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

Question

我有一個像這樣的例子jsfiddle其中我有一個列表<a>元素。在每個<a>元素內，我有一個<span>和一個<button>。我想這樣做的是我要對齊右邊的按鈕，我通過添加類pull-right做到這一點，它工作得很好

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

，我要對齊的span和相同的button行，但如果我在範圍內有一個非常長的名稱，那麼該按鈕不再與範圍在同一行上。我該如何解決這個問題？

Answer 1

可以寬度和顯示屬性設置爲span元素是這樣的：

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

，並添加規則的按鈕寬度是這樣的：

.btt{ 
    width: 30px; 
} 

我更新了FIDDLE

Answer 2

這是我遇到過幾次的問題，通常我所做的是決定最大長度，我將允許這個值，然後用省略號截斷。

這取決於你，但我認爲這是一個不錯的選擇，因爲它是防禦性編碼，無論價值如何都能保持你的顯示器整潔。

下面是一個例子CSS類，你可以添加到您的跨度：

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

Answer 3

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

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

Live example