So I got the following code.
HTML
<div id="container">
<p class="title"> Social Media </p>
<ul>
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="deviant">Deviantart</a></li>
<li><a href="#" class="skype">Skype</a></li>
</ul>
</div>
CSS
#container {
background-color: #FFF;
background-image: url(images/footer.jpg);
height: 250px;
margin-top: 40px;
border-top: 3px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
}
p.title {
color: #FFF;
font-family: "Open Sans", Helvetica, sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#container ul {
text-align: center;
word-spacing: 150px;
margin: 0;
padding: 0;
}
#container ul li {
display: inline;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#container > ul > li > a {
text-decoration: none;
color: #FFF;
letter-spacing: 5px;
text-transform: uppercase;
line-height: 3;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
Now, the problem is that the 3 links "TWITTER DEVIANTART SKYPE" wont align exactly as the text above saying "SOCIAL MEDIA" even though it's both aligned to center.
I don't know why though, I want the three links to be centered exactly as the SOCIAL MEDIA text above but it just isn't. Any ideas?
Here's a JSFiddle showing the issue:
Not the nicest way but I put <br>
after two of the list elements and that drops them down.
Change
container ul li{
display: inline
}
To
container ul li{
display: block
}
Display inline puts them on one line block puts them on separate lines, hope this helps it works in the fiddle.
just add <br>
tag to the list.... here is the fiddle for that..[jsfiddle][1]
[1]: http://jsfiddle.net/hh54D/7/ hope this is right...
If I understand correctly:
#container {
background-color: #FFF;
background-image: url(images/footer.jpg);
height: 250px;
margin-top: 40px;
border-top: 3px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
}
p.title {
color: #FFF;
font-family: "Open Sans", Helvetica, sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#container ul {
text-align: center;
word-spacing: 150px;
margin: 0;
padding: 0;
}
#container ul li {
/*display: inline;*/
float: left;
list-style: none;
width: 33.3%;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#container > ul > li > a {
text-decoration: none;
color: #FFF;
letter-spacing: 5px;
text-transform: uppercase;
line-height: 3;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
Here's an updated fiddle with a fix: JSFiddle
The changes are noted below:
#container ul {
/* text-align: center; moved to li */
/* word-spacing: 150px; removed, this was causing issue as some words are longer */
width: 100%;
display: table; /* added */
table-layout: fixed; /* added */
margin: 0;
padding: 0;
}
#container ul li {
display: table-cell; /* added */
width: auto; /* added */
text-align: center; /* moved */
/* display: inline; removed */
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
The misalignment was being caused by: word-spacing: 150px;
and the fact that the menu options are all different widths. If you used the same word 3 times they would align but different length words are spread according to their width.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.