[英]Images and text not aligning properly
如您所見,我已經在jsFiddle上面創建了,一旦添加圖像,一切都將變得混亂。 當我不添加圖像時,它們對齊得很好。 我怎樣才能解決這個問題?
<section class="buttons">
<ul>
<li><a href="fotografie.html"><span><img src="http://placehold.it/60x60" /></span><span>Fotografie</span><span><img src="http://placehold.it/16x25" /></span></a><hr /></li>
<li><a href="360.html"><span><img src="img/Icon-360.png" /></span><span>360° Foto's</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
<li><a href="plattegrond.html"><span><img src="img/Icon-plattegrond.png" /></span><span>Plattegronden</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
<li><a href="video.html"><span><img src="img/Icon-video.png" /></span><span>Artist Impressions</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
<li><a href="artist_impression.html"><span><img src="img/Icon-Artist-Impression.png" /></span><span>Video</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
<li><a href="inmeten.html"><span><img src="img/Icon-Inmeten.png" /></span><span>Inmeten</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
</ul>
</section>
具有以下樣式:
.buttons{
display: block;
margin: 0 auto;
}
.buttons ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.buttons ul li{
display: block;
height: 60px;
background-color: rgb(214, 55, 45);
border-bottom: 1px white;
}
.buttons ul li a{
color: rgb(246, 246, 246);
text-decoration: none;
font-weight: 400;
line-height: 60px;
font-size: 1.25em;
display: block;
}
.buttons ul li a span{
color: rgb(246, 246, 246);
text-decoration: none;
font-size: 1.5em;
text-transform: uppercase;
}
.buttons ul li a span img{
line-height: 60px;
padding-left: 50px;
}
.buttons ul li a span:nth-child(2){
padding-left: 100px;
}
.buttons ul li a span:last-child{
float: right;
position: relative;
right: 50px;
}
更新了您的代碼。 請檢查以下鏈接:
http://jsfiddle.net/binita07/CSAxH/3/
.buttons{
display: block;
margin: 0 auto;
}
.buttons ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.buttons ul li{
display: block;
height: 70px;
background-color: rgb(214, 55, 45);
border-bottom: 1px white;
}
.buttons ul li a{
color: rgb(246, 246, 246);
text-decoration: none;
font-weight: 400;
line-height: 70px;
font-size: 1.25em;
display: block;
}
.buttons ul li a span{
color: rgb(246, 246, 246);
text-decoration: none;
font-size: 1.25em;
text-transform: uppercase;
}
.buttons ul li a span img{
line-height: 70px;
padding-left: 50px;
display:inline-block;
vertical-align:middle;
}
.buttons ul li a span:nth-child(2){
padding-left: 100px;
}
.buttons ul li a span:last-child{
float: right;
position: relative;
right: 50px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.