HTML – 文本环绕图标,跨越h3标记内

概述我试图让我的文本对齐,以便文本不会环绕这个图标.我遇到了麻烦,因为我的图标和文字都在h3标签和锚内,我正在使用跨度.我通常会做这项工作的典型方法不起作用,因为我使用跨度,因为图标和文本都在h3和锚之内. 我在寻找的是 icon Test test test test test test Test test test test test test 我得到的是 icon Test test 我试图让我的文本对齐,以便文本不会环绕这个图标.我遇到了麻烦,因为我的图标和文字都在h3标签和锚内,我正在使用跨度.我通常会做这项工作的典型方法不起作用,因为我使用跨度,因为图标和文本都在h3和锚之内.

我在寻找的是

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

我得到的是

icon Test test test test test testTest 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  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 ></span>    <span >Does American AgCredit offer special programs for young,beginning,or small farmers/ranchers?American AgCredit offer special programs for young,or small farmers/ranchers?</span></a></h3>

JSFiddle

解决方法 您可以将锚点和范围的显示设置为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  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 ></span>  </a>  <span >Does American AgCredit offer special programs for young,or small farmers/ranchers?</span></h3>

总结

以上是内存溢出为你收集整理的HTML – 文本环绕图标,跨越h3标记内全部内容，希望文章能够帮你解决HTML – 文本环绕图标,跨越h3标记内所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。