CODEWITHSUNDEEP
javascripthtmlcss
user7408338
user7408338

Reputation:

How to space words in a div with spans

I've got trouble spacing words in a div with spans. Here is the html : 

<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

and the css : 

.footer-links{
    float: right;
    margin-top: 11px;
    margin-bottom: 11px;
}

JS fiddle her ==> https://jsfiddle.net/kxdnwL4k/3/

How to space words so its gets easier for users to read ?

Many thanks

Upvotes: 0

Views: 772

Answers (4)

user4616966
user4616966

Reputation:

I'm assuming you mean the words are too close to read.

.footer-links{
	float: right;
	margin-top: 11px;
	margin-bottom: 11px;
  word-spacing: 5px;
  letter-spacing: 2px;
}
<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

I used letter-spacing to space out the letters a bit, and word-spacing to put some space between words a bit more.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

Just add a horizontal margin to the spans. You can exclude the first one using :not(:first-child) or span + span

.footer-links {
  margin: 11px 0;
  float: right;
}
.footer-links span:not(:first-child) {
  margin-left: 1em;
}
<div class="footer-links">
  <span><a href="#">Suggestions</a></span>
  <span><a href="#">Help</a></span>
  <span><a href="#">Contact us</a></span>
</div>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

I would suggest a ul for the list of links - its always best to use the right tool for the job.

Note that I have put this ul into a <footer> element - use a div if you are not using the HTML5 doctype. then its just a case of applying a margin to the ul lis and you have a horizontal list with spaced out li's.

You could also get fancy and apply an "active" class to the li that reflects the current page. Then you would have a list of footer links that are spaced and in context with your page.

.footer-links {
  list-style:none
}

.footer-links li {
display:inline;
margin-right:30px
}
<footer>
  <ul class="footer-links">
    <li><a href="#">Suggestions</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
 </footer>

Upvotes: 0

kind user
kind user

Reputation: 41893

Why not just to use margin css property to make them look more clearer?

.footer-links a {
  margin: 0 5px 0 5px;
}


.footer-links {
  float: right;
  margin-top: 11px;
  margin-bottom: 11px;
}

.footer-links a {
  margin: 0 5px 0 5px;
}
<div class="footer-links">
  <a href="#">Suggestions</a>
  <a href="#">Help</a>
  <a href="#">Contact us</a>
</div>

Upvotes: 0

Related Questions