Having a problem lining up my elements with CSS
I have an unordered list that contains links. Some of the links are text and some are text with icons. But I have a problem in that I can't get them to line up. Can someone suggest what I am doing wrong here. I have tried different combinations but still can't get things to line up.
Here is my HTML code. Note that I used an icon from another site. I can't link to my own site as its internal.
<div id="ftr_top_ctr" class="btn_lnk">
<ul class="left">
<li><a class="disabled" id="doCheckMark" rel="nofollow">Mark</a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" /></a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" />Test</a></li>
</ul>
</div>
div#ftr_top {
height: 30px;
}
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
float: left;开发者_如何学C
padding: 0;
position: relative;
}
#ftr_top_ctr a {
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
You can see the code and what it displays: fiddle
Add vertical-align: top
to the img
s.
http://jsfiddle.net/thirtydot/86ZEf/4/
This problem was happening because the default vertical-align
is baseline
, see here for more information.
Add float:left;
to #ftr_top_ctr a
and give it a line-height:16px;
. Add a rule for the icon: #ftr_top_ctr a img {float:left;}
. Fiddle.
Try this: http://jsfiddle.net/86ZEf/8/
Instead of adding a border to the a elements, add it to the li elements and set a height on the li elements too. Lastly, remove the "float", set "li" to inline and you're good to go. Relevant snippet:
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
Here is the updated css in its entirity:
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
img {
vertical-align: top
}
精彩评论