將排序圖標放置到動態div的文本頭部？

我有一個動態的父div有百分比的寬度裏面，我有一個div與排序圖標和文本，我只是想排序圖標位置標題文本的權利。將排序圖標放置到動態div的文本頭部？

Here是我想要實現的附件輸出。

.parent{ width:150px; border:1px solid red} 
 
.fa-caret-up:after{ content: "v"; border:1px solid red}

<div class="parent"> 
 
<span>display inline not working</span> 
 
<span class="fa-caret-up"></span> 
 
</div>

我想插入符號圖標文本

來源

2017-05-10 Ashok Yadav

嘗試.parent {顯示：彎曲;}對於父DIV –

顯示：FLEX不起作用根據字或圖標，因爲它的創建塊寬度 –

我附加了像我想要的圖像\ –

檢查這個希望後右上角這個解決您的問題右上

.parent{ width:150px; border:1px solid red} 
 
.fa-caret-up:after{ content: "v"; border:1px solid red;float:right}

<div class="parent"> 
 
<span class="fa-caret-up"></span> 
 
<span>display inline not working</span> 
 
</div>

在後的右邊文字

.parent{ width:150px; border:1px solid red} 
 
.fa-caret-up:after{ content: "v"; border:1px solid red;float:right}

<div class="parent"> 
 
<span>display inline not working</span> 
 
<span class="fa-caret-up"></span> 
 
</div>

感謝

來源

2017-05-10 07:14:31

不想正確的在父文本正確的文本已完成。之後'不' –

你可以在你的html中進行更改嗎？ –

先生是，任何方式的V圖標後'不'或跨區塊 –

你最終可能會嘗試使用display: flex

編輯

您可以申請flex: 0 0 auto; max-width: 100%;到.fa-caret-up而已，它更接近你想要的結果。

.parent{ width:150px; border:1px solid red; display: flex; } 
 
.fa-caret-up { flex: 0 0 auto; max-width: 100%;} 
 
.fa-caret-up:after{ content: "v"; border:1px solid red}

<div class="parent"> 
 
<span>display inline not working</span> 
 
<span class="fa-caret-up"></span> 
 
</div>

來源

2017-05-10 07:25:14

兄弟，我只是在'not'之後在右邊的文本塊之後想要v圖標 –

你說你的寬度是動態的，有很多或多或少的醜陋的方法來把東西放在文本的中間，但是沒有什麼是防彈的。 –

你可以在父元素上使用固定表格的佈局和剛剛成立的第一個孩子跨度的寬度。您可以在僞:after元素上使用margin縮進圖標和文本之間的空格。

下面是一個例子

.parent { 
 
    width: 150px; 
 
    border: 1px solid red; 
 
    display: table; 
 
    table-layout: fixed; 
 
    white-space: wrap; 
 
} 
 

 
.fa-caret-up:after { 
 
    content: "v"; 
 
    border: 1px solid red; 
 
    margin-left: 4px; 
 
} 
 

 
.parent span { 
 
    display: table-cell; 
 
} 
 

 
.parent span:first-child { 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <span>display inline not working</span> 
 
    <span class="fa-caret-up"></span> 
 
</div>

來源

2017-05-10 07:39:16 DavidDomain

謝謝先生，表格：固定;工作很好，但我可以給跨度固定的寬度，因爲我有單行文本也來在表標題 –


             
   
    
    .parent { 
 
    \t border: 1px solid #f00; 
 
    } 
 
    
 
    .caret { 
 
    \t display: inline-block; 
 
     padding: 10px; /* if required */ 
 
    } 
 
    
 
    .caret:after { 
 
    \t content: '\2191'; 
 
     position: absolute; 
 
     margin-left: 10px; 
 
    } 
    <div class="parent"> 
 
\t <span class="caret">Some text</span> 
 
</div>

來源

2017-05-10 07:48:19

將排序圖標放置到動態div的文本頭部？

回答

相關問題