需要在我使用的每个 span 元素之后换行

Question

上下文：

我在背景图像中使用跨度换行，这样我就可以使用项目符号样式。

问题：

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

查看下图：

如您所见，内容为 "VAT Rates and Refunds " 的跨度加入了同一行。

我的代码：

.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

您可以将 <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 2

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

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

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

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

但是，如果您不想这样做，只需使用 <div>s 而不是 span。放置 span 只是为了将它们重新设置为 div 是没有意义的。

Answer 4

由于您将跨度包含在锚标记内，并且锚标记是内联元素，因此只需设置锚标记的样式以显示为块 "a {display : block}"。

Answer 5

只需在您的 CSS class 中添加一个 :

clear:both

Answer 6

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

选项 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：

用 display : block 替换你的 float: left :

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

您可以重置链接的块格式上下文以注意浮动和断行。在这里你可以使用 display:table;（缩小内容）或 display:flex;（使用整行）。

Maybe it is a good time to mind floats ? https://css-tricks.com/all-about-floats/ (one link but many other in your search engine)

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

将所有 link 包装在 <ul> 中，然后将每个 link 包装在 <li> 中，并将 li { list-style: none; margin: 0 5px 10px; } 添加到 CSS并删除 float.

片段

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

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

Answer 9

删除float:left；并使用 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;
}

需要在我使用的每个 span 元素之后换行

Need to break a line after every span element I am using

html

css

styling

上下文：

问题：

我的代码：

选项 1：

选项 2：

选项 3：