CODEWITHSUNDEEP
htmlcssstyling
sanainfotech
sanainfotech

Reputation: 691

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

The context :

I am using span wrap with background images so I can have bullet point styling.

The problem :

If the content is too narrow, the next span element joins the same line.

Check the image below :

enter image description here

As you can see the span with content "VAT Rates and Refunds " joins the same line.

My code :

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

How can I make next following span next to go next line?

Upvotes: 0

Views: 73

Answers (9)

L. Vadim
L. Vadim

Reputation: 549

Remove the float:left; and use 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;
}

Upvotes: 0

rayees
rayees

Reputation: 137

As you're including the spans inside an anchor tags and anchor tags are inline element so just style the anchor tags to display as block "a {display : block}".

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

You can reset block formating context of links to mind the float and break a line. here you may use display:table;(shrinks on content) or display:flex;(use entire line).

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>

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

Wrap all of your links in a <ul> then wrap each link in a <li> and add li { list-style: none; margin: 0 5px 10px; } to CSS and remove the float.

Snippet

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

Upvotes: 0

John Slegers
John Slegers

Reputation: 47091

There are quite a few ways to achieve the desired effect. Herebelow are just a some of them...

Option 1 :

Replace your float: left with display : inline-block and 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>

Option 2 :

Replace your float: left with 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>

Option 3 :

Add clear : both to your a elements :

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

Upvotes: 0

Sebastian
Sebastian

Reputation: 1179

Add a display: block and remove the float like this:

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

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can set the <a> or <span> to display:block; and remove the 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

Upvotes: 0

Rachid B.
Rachid B.

Reputation: 388

Just add in your CSS class a :

clear:both

Upvotes: 1

GMchris
GMchris

Reputation: 5648

Some have suggested to turn <span> or <a> into block elements, however it's a bit more semantic to instead use line break tag, to start a new line <br/>.

If you don't want to do that, however, just use <div>s instead of spans. No point in putting spans just to restyle them as divs.

Upvotes: -1

Related Questions