在我使用的每个span元素之后需要断开一条线

Question

上下文：

我正在使用带有背景图像的span包装，所以我可以使用子弹点样式。

问题：

如果内容太窄，则下一个span元素会加入同一行。

检查下图：

正如您所看到的，内容“增值税率和退款”的范围加入了同一行。

我的代码：

.arrowIconFooter{
    background-image:url(../img/arrowFooter.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 13px;   
    float: left;   
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
}

<section class="floating-left">
  <a href="#">  <span class="arrowIconFooter">Cycle to Work Scheme Update</span></a>
  <a href="#">  <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span></a>
  <a href="#">  <span class="arrowIconFooter">Maximum NI Contributions</span></a>
  <a href="#">  <span class="arrowIconFooter">VAT Rates and Refunds</span></a><br>
  <a href="#">  <span class="arrowIconFooter">February Question and Answer Section</span></a>
  <a href="#">  <span class="arrowIconFooter">February Key Tax Dates</span></a>
</section>

如何在下一行旁边进行下一个跨度？

Answer 1

添加display: block并删除float，如下所示：

＆＃13;

＆＃13;

.arrowIconFooter {
  display: block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjU4QzIwRkMwRTM2MTFFNTg0M0NFMEI5QkFGQTRFRDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjU4QzIwRkQwRTM2MTFFNTg0M0NFMEI5QkFGQTRFRDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NThDMjBGQTBFMzYxMUU1ODQzQ0UwQjlCQUZBNEVEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NThDMjBGQjBFMzYxMUU1ODQzQ0UwQjlCQUZBNEVEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqDvctsAAAMcSURBVHja7JVZSFRhFMfPXcdxxqUZLUbTUMxScg3DCs0MQ6LyIRKSoggrxKggMjDc0CiCwggsCE0ysiRJLRTEcmvHMAoSU5NJnMVlxqVxljv33s5VnwLNUXzrXO7LvR/nd77/d/7nI0RRhNUMElY5Vh1AL/Sjd6IdFLQa3unLj78fvZeW4l+Q5eAtRrtgxaqIv1aLEKCIgnjNsaUDGEIu/zxSc+Dhz9IykxPcZUSJPEFz5QQv8kZB5FYuUZP26oXKgeKno5jclwHoMFlS2/VFjxnSLYgmGBBAXBkgbl36qzhVzBOrACDV642QtnF7cpvhVgVLKQJlpDtChOUDtqhSP50Kq8nI0MTd1zlQMvzmwwJ8ME0mteqLK2lK7seQ8uUDTLZhoAhGzIpsOJ2u2Vo+gBDJMhLkrdm+u3U4t5om2BBJLlhErgUBBEHCjHMCBIGD7IiXmUf9ksu0CLGhKj7YGm/MkPhaV1BFkWwos4hci/qAICiwcCbgeBucCavIPumfdMfgmPvni5CPZohv0RU9IElZkIxUuAbAbgGWkoOMVqI0PJAkC9mRz8+dDT582zJfrCRX1wTsaBzKq7Xy0xtdMlqPuQU4wQE8PlIV0szylQeDNxtg5BEg0HMHT6LntDMQ5MGq3VwCjFu1YBd+g0N0IkAED2YtdOrvnm/SN+cq5pMbsH9VNJgLox6lBXlu++aSRCzljq9yVia1bAMYrL05jbrmG04RlFLyUW72HIzFMTV7I9T7OqcdY66dgeRUaeZ4YeW/LN2Xa4dqrnMisHIKd+cE8GdhsDCmOjVMtadr3KZ1fdgxpAzccAf9k505DcN11wQRCE9cPYRdFMiALjf62aGwNSlfpOQkQbsOQJOt75vsyHwxXJ/LY8dKuhvsABoW9Pmxdfs3ee/qNtuGpGZenpOl5O0j9ZemeGDccZURK/d3g/6S2PqkEK+d3WPYBEsZeAsCeJGrCvfcfBO7RNRj8kgl9OVF1x0M9Ur4MYFjhEQTrujCoYAeUDJ++dvVLPd96mvikeDSi+GqlJ6RmcFZhy81iP+X/r/ijwADAISDLHeCN/xPAAAAAElFTkSuQmCC');
  background-position: left;
  background-repeat: no-repeat;
  padding: 6px 8px 6px 23px;
  font-family: monospace;
  font-size: 15px;
  color: #66809E;
  font-weight: 400;
}

＆＃13;

<section class="floating-left">
  <a href="#">
    <span class="arrowIconFooter">Cycle to Work Scheme Update</span>
  </a>
  <a href="#">
    <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span>
  </a>
  <a href="#">
    <span class="arrowIconFooter">Maximum NI Contributions</span>
  </a>
  <a href="#">
    <span class="arrowIconFooter">VAT Rates and Refunds</span>
  </a>
  <a href="#">
    <span class="arrowIconFooter">February Question and Answer Section</span>
  </a>
  <a href="#">
    <span class="arrowIconFooter">February Key Tax Dates</span>
  </a>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在CSS类中添加一个：

clear:both

Answer 3

您可以将<a>或<span>设置为display:block;并移除float

<强> CSS

.arrowIconFooter{
display: block;
background-image:url(../img/arrowFooter.png);
background-position:left;
background-repeat: no-repeat;    
padding: 6px 8px 6px 13px;     
font-family: monospace;
font-size:15px;
color:#66809E; 
font-weight:400;
}

<强> DEMO HERE

Answer 4

当您在锚标记中包含跨度并且锚标记是内联元素时，只需将锚标记设置为样式以显示为块＆＃34; a {display：block}＆＃34;。

Answer 5

有很多方法可以达到预期的效果。以下是其中一些......

选项1：

将float: left替换为display : inline-block和width : 100%：

.arrowIconFooter {
    background-image:url(../img/arrowFooter.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 13px;   
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
    display:inline-block;
    width: 100%;
}

<section class="floating-left">
  <a href="#">  <span class="arrowIconFooter">Cycle to Work Scheme Update</span></a>
  <a href="#">  <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span></a>
  <a href="#">  <span class="arrowIconFooter">Maximum NI Contributions</span></a>
  <a href="#">  <span class="arrowIconFooter">VAT Rates and Refunds</span></a>
  <a href="#">  <span class="arrowIconFooter">February Question and Answer Section</span></a>
  <a href="#">  <span class="arrowIconFooter">February Key Tax Dates</span></a>
</section>

选项2：

将您的float: left替换为display : block：

.arrowIconFooter {
    background-image:url(../img/arrowFooter.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 13px;   
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
    display:block;
}

<section class="floating-left">
  <a href="#">  <span class="arrowIconFooter">Cycle to Work Scheme Update</span></a>
  <a href="#">  <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span></a>
  <a href="#">  <span class="arrowIconFooter">Maximum NI Contributions</span></a>
  <a href="#">  <span class="arrowIconFooter">VAT Rates and Refunds</span></a>
  <a href="#">  <span class="arrowIconFooter">February Question and Answer Section</span></a>
  <a href="#">  <span class="arrowIconFooter">February Key Tax Dates</span></a>
</section>

选项3：

将clear : both添加到您的a元素：

.arrowIconFooter {
    background-image:url(../img/arrowFooter.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 13px;   
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
    float: left;
    clear : both;
}

<section class="floating-left">
  <a href="#">  <span class="arrowIconFooter">Cycle to Work Scheme Update</span></a>
  <a href="#">  <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span></a>
  <a href="#">  <span class="arrowIconFooter">Maximum NI Contributions</span></a>
  <a href="#">  <span class="arrowIconFooter">VAT Rates and Refunds</span></a>
  <a href="#">  <span class="arrowIconFooter">February Question and Answer Section</span></a>
  <a href="#">  <span class="arrowIconFooter">February Key Tax Dates</span></a>
</section>

Answer 6

您可以重置链接的块格式化上下文以记住浮点数并断开一条线。在这里，您可以使用display:table;（缩小内容）或display:flex;（使用整行）。

  

也许是时候想起漂浮物？ https://css-tricks.com/all-about-floats/（您的搜索引擎中有一个链接，但很多其他链接）

     

.arrowIconFooter {
  background-image: url(../img/arrowFooter.png);
  background-position: left;
  background-repeat: no-repeat;
  padding: 6px 8px 6px 13px;
  float:left;
  font-family: monospace;
  font-size: 15px;
  color: #66809E;
  font-weight: 400;
}

section a {
  display:table; /* wraps on content or  flex takes the whole line */
  }

<section class="floating-left">
  <a href="#"> <span class="arrowIconFooter">Cycle to Work Scheme Update</span>
  </a>
  <a href="#"> <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span>
  </a>
  <a href="#"> <span class="arrowIconFooter">Maximum NI Contributions</span>
  </a>
  <a href="#"> <span class="arrowIconFooter">VAT Rates and Refunds</span>
  </a>
  <a href="#"> <span class="arrowIconFooter">February Question and Answer Section</span>
  </a>
  <a href="#"> <span class="arrowIconFooter">February Key Tax Dates</span>
  </a>
</section>

Answer 7

将所有链接包裹在<ul>中，然后将每个链接打包在<li>中，然后将li { list-style: none; margin: 0 5px 10px; }添加到CSS并移除float。

<强>段

＆＃13;

＆＃13;

.arrowIconFooter{
    background-image:url(http://iconshow.me/media/images/ui/ios7-icons/png/24/arrow-left-b.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 20px;   
    /*float: left;*/   
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
   
}
li { list-style: none; margin: 0 5px 10px; }

＆＃13;

<section>
  <ul>
  <li><a href="#">  <span class="arrowIconFooter">Cycle to Work Scheme Update</span></a></li>
  <li><a href="#">  <span class="arrowIconFooter">Divided Planning to Maximise Tax Credits</span></a></li>
  <li><a href="#">  <span class="arrowIconFooter">Maximum NI Contributions</span></a></li>
  <li><a href="#">  <span class="arrowIconFooter">VAT Rates and Refunds</span></a></li>
  <li><a href="#">  <span class="arrowIconFooter">February Question and Answer Section</span></a></li>
  <li><a href="#">  <span class="arrowIconFooter">February Key Tax Dates</span></a></li>
    </ul>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 8

删除浮动：左;并使用display：block;

.arrowIconFooter{
    display: block;
    background-image:url(../img/arrowFooter.png);
    background-position:left;
    background-repeat: no-repeat;    
    padding: 6px 8px 6px 13px;      
    font-family: monospace;
    font-size:15px;
    color:#66809E; 
    font-weight:400;
}

Answer 9

有些人建议将<span>或<a>转换为块元素，但是使用换行符标记来开始换行<br/>会更加语义。

但是，如果您不想这样做，只需使用<div>而不是跨度。没有必要将跨度作为div来重新设置它们。