Question

我有一个标记，将锚点（用于帮助图标）放在<label/>元素之后。如果标签和图标固定在一行上，那么一切都会按照我的要求进行。但是，如果标签引起文本换行（由于长度），则该图标将创建换行并在新行上进行渲染。我希望无论标签花费多少行，图标都只会在同一行的标签之后“显示”。

这是渲染的结果（如果屏幕尺寸不合适，请注意，我不知道为什么Font Awesome不能在小提琴中发挥作用，但您仍然可以看到问题）：

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

HTML

<div class="container">
  <div class="row">
    <div class="col">
      <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019</label>
      <a class="vhiMedicare" style="" role="button" tabindex="0">
        <span class="fal fa-question-circle"></span>
      </a>      
    </div>
    <div class="col">
      <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
      <a class="vhiMedicare" style="" role="button" tabindex="0">
        <span class="fal fa-question-circle"></span>
      </a>      
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

这是小提琴：https://jsfiddle.net/8x2na97d/

Answer 1

设置此CSS：

label{
  display: inline;
}

Answer 2

在标签内添加锚标签。

<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019       
  <a class="vhiMedicare" style="" role="button" tabindex="0">
    <span class="fal fa-question-circle"></span>
  </a>  
</label>

解决方案：https://jsfiddle.net/hqx5wjop/1/

之所以会这样，是因为标签显示为inline-block，而定位标记显示为inline

您也可以通过添加样式来解决它

display: inline;

标记标签

Answer 3

尝试使用此代码label{display:inline;}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
label{
  display:inline;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 ffddff</label>
      <a class="vhiMedicare" style="" role="button" tabindex="0">
        <span class="fal fa-question-circle"></span>
      </a>      
    </div>
    <div class="col">
      <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
      <a class="vhiMedicare" style="" role="button" tabindex="0">
        <span class="fal fa-question-circle"></span>
      </a>      
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

Answer 4

我认为这段代码将帮助您为同一行中的标签和fa图标

   <style>
       .row {
        background: #f8f9fa;
        margin-top: 20px;
       }

 .col {
   border: solid 0px #6c757d;
   padding: 10px;
 }
     </style>

   <body>
 <div class="container">
       <div class="row">
          <div class="col">
              <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019
             <a class="vhiMedicare" style="" role="button" tabindex="0">
             <span class="fal fa-question-circle"></span>
            </a></label>   
          </div>

         <div class="col">
            <label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps
            <a class="vhiMedicare" style="" role="button" tabindex="0">
            <span class="fal fa-question-circle"></span>
            </a> </label>     
          </div>

         <div class="col">
             3 of 3
          </div>
        </div>  
        </div>
   </body>

<label />和<a/>之间不必要的换行

4 个答案: