Question

我正在尝试将文本对齐，以便文本不会包围此图标。我遇到了麻烦，因为我的图标和文字都在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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

JSFiddle

Answer 1

您可以将锚点和范围的显示设置为table-cell：

.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>

Answer 2

最简单的解决方案是将display: flex;应用于h3 > a并删除text-align: right中的.textalignleft。这将在a内的h3内创建两个相等高度的块：

评论后编辑片段并更改了问题：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

文本环绕图标与跨越h3标记内

2 个答案: