環繞h3標籤內部跨度的圖標文字

我試圖讓我的文字對齊，以便文字不環繞此圖標。我有麻煩，因爲我的圖標和我的文本在h3標籤和錨點內，我正在使用跨度。我通常做這項工作的典型方法是行不通的，因爲我使用跨度，並且因爲圖標和文本都在h3和錨點內。環繞h3標籤內部跨度的圖標文字

我所尋找的是

icon Test test test test test test 
    Test test test test test test

我所得到的是

icon Test test test test test test 
Test test Test test test test test

.ui-accordion .ui-accordion-header { 
 
    display: block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    margin: 2px 0 0 0; 
 
    padding: .5em .5em .5em .7em; 
 
    min-height: 0; 
 
    font-size: 100%; 
 
} 
 

 
.fa-plus::before { 
 
    content: "\f067"; 
 
} 
 

 
.textalignleft { 
 
    overflow: hidden; 
 
    text-align: right; 
 
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
 
    <a href="javascript:void(0)"> 
 
    <span class="fa fa-plus fc-iconspace"></span> 
 
    
 
    <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></a></h3>

JSFiddle

來源

2017-06-14 Chris Atwood

您可以設置錨的顯示和跨度表細胞：

.ui-accordion .ui-accordion-header { 
 
    display: block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    margin: 2px 0 0 0; 
 
    padding: .5em .5em .5em .7em; 
 
    min-height: 0; 
 
    font-size: 100%; 
 
} 
 

 
.fa-plus::before { 
 
    content: "\f067"; 
 
} 
 

 
a, 
 
.textalignleft { 
 
    display: table-cell; 
 
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
 
    <a href="javascript:void(0)"> 
 
    <span class="fa fa-plus fc-iconspace"></span> 
 
    </a> 
 
    <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></h3>

來源

2017-06-14 20:50:19 j08691

對不起，我沒有換第二跨度錨。整個事情都由h3和主播包裝。 –

謝謝你的幫助！ –

最簡單的解決方案是應用display: flex;到h3 > a和擦除.textalignleft的text-align: right。這將創建一個內部高度相等的兩個區塊的a內h3：

評論和改變的問題後

編輯片段：

.ui-accordion .ui-accordion-header { 
 
    display: block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    margin: 2px 0 0 0; 
 
    padding: .5em .5em .5em .7em; 
 
    min-height: 0; 
 
    font-size: 100%; 
 
} 
 

 
.fa-plus::before { 
 
    content: "\f067"; 
 
} 
 

 
.textalignleft { 
 
    overflow: hidden; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
} 
 
h3 > a { 
 
    display: flex; 
 
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
 
    <a href="javascript:void(0)"> 
 
    <span class="fa fa-plus fc-iconspace"></span> 
 
    
 
    <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></a></h3>

來源

2017-06-14 22:38:15 Johannes

對不起，我沒有把第二個跨度包裹在錨點中。整個事情都由h3和主播包裝。 –

儘管如此，幾乎相同的解決方案，只是您將flex應用於'a'標籤插入'h3' - 請參閱上面編輯的答案和代碼片段。 – Johannes

環繞h3標籤內部跨度的圖標文字

回答

相關問題