环绕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标签内部跨度的图标文字

回答

相关问题