在TH中對齊兩個DIV

-2

我有一個table其中我想在th中的文本右側添加排序圖標。這裏是我當前的代碼：在TH中對齊兩個DIV

我遇到的問題是，當列大小由於分辨率/瀏覽器窗口大小減小，在th文本獲取圖標上方移動。我如何使用CSS來始終將文字放在圖標的左側？

2017-08-17 Eric Belair

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在**堆棧片斷**。雖然您提供了一個鏈接，但如果它變得無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。請參閱[**我網站上的某些內容不起作用，我可以只粘貼一個鏈接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯規，工作可以-I-剛剛糊一個鏈接到它）。 –

我很抱歉連接到一個正在運行的示例，顯示我遇到的確切問題。代碼已經插入在這裏，所以現在它在兩個地方，而不是一個。 –

我們不希望**鏈接**因爲我聲明的原因..您的代表您應該知道這一點。代碼應該是**的問題** ...這是基本的和規定的要求， –

換行文本和圖標爲flex-container和使用flexbox

<div class="flex-container"> 
    <div class="label"> 
    Order Number 
    </div> 
    <div class="sort-icons"> 
    <cfoutput> 
     <div> 
     <a href="?sortBy=OrderNumber&sortOrder=ASC" title="Sort Ascending"><span class="ui-icon ui-icon-circle-triangle-n"></span></a> 
     </div> 
     <div> 
     <a href="?sortBy=OrderNumber&sortOrder=DESC" title="Sort Descending"><span class="ui-icon ui-icon-circle-triangle-s" style="display: block;"></span></a> 
     </div> 
    </cfoutput> 
    </div> 
</div>

CSS

.flex-container { 
    display: flex; 
}

Updated Fiddle

來源

2017-08-17 13:50:19

添加顯示：inline-block;在CSS中.sortable

來源

2017-08-17 13:50:07

你可以定義一個最大寬度和浮動每個元素，以便他們不會堆疊：

.sortable .label { 
    display: inline; 
    max-width:70%; 
    float:left; 
    height: 39px; 
    margin-right: 0.3em; 
} 

.sortable .sort-icons { 
    max-width:30%; 
    float: right; 
    display: inline; 
    width: 20px; 
    height: 39px; 
}

來源

2017-08-17 13:54:19

變化是這樣的：

.sortable .label { 
    display: inline;<------Change to inline-block; 
    margin-right: 0.3em;<--------Remove 
    width:85%;<------------Added 
    float:left;<-----------Added 
    height: 39px; 

} 

.sortable .sort-icons { 
    float: right;<--------Remove 
    display: inline;<------Change to inline-block; 
    width: 15%;<------Added 
    vertical-align: top;<----Added 
    height: 39px; 
}

Demo

來源

2017-08-17 13:59:39 Ehsan

我試過這個，但它沒有給我預期的結果.... –

在TH中對齊兩個DIV

回答

相關問題