我需要像图片中那样对齐我的列表项(在下拉列表中)。
正如你所看到的那样,它们是居中的,但是alson在一条直线上对齐。我怎么能做到这一点?
这是我的代码:
<div class="footer">
<div class="outer">
<div class="container">
<ul id="insurances">
<li><a href="conditions-form.html"><img src="img/estate-insurance.png">Ubezpieczenia nieruchomości</a></li>
<li><a href="conditions-form.html"><img src="img/tourist-insurance.png">Ubezpieczenia turystycznego</a></li>
<li><a href="conditions-form.html"><img src="img/health-insurance.png">Ubezpieczenia zdrowotnego</a></li>
<li><a href="conditions-form.html"><img src="img/car-insurance.png">Ubezpieczenia samochodu</a></li>
<li><a href="conditions-form.html"><img src="img/assistance-insurance.png">Ubezpieczenia assistance</a></li>
<li><a href="conditions-form.html"><img src="img/NNW-insurance.png">Ubezpieczenia NNW</a></li>
<li><a href="conditions-form.html"><img src="img/law-insurance.png">Ochrony prawnej</a></li>
</ul>
<p>Szukam</p>
<a class="insurance-type">
<span>Ubezpieczenia nieruchomości</span>
</a>
<div clas="clear"></div>
</div>
</div>
和Css
.footer .outer .container ul {
position: absolute;
border:none;
padding: 0;
margin: 0;
bottom:110px;
left:0;
right:0;
display:none;
}
.footer .outer .container ul li a img {
height: 25px;
margin-right: 20px;
}
.footer .outer .container ul li {
padding:0;
margin:0;
list-style: none;
}
.footer .outer .container ul li a {
color: #fff;
text-decoration: none;
font-size:21px;
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: left;
margin: 0 auto;
display:block;
height: 70px;
line-height: 70px;
}
感谢任何提案
答案 0 :(得分:0)
迅速嘲笑某事,可能这就是你要找的http://jsfiddle.net/kasperoo/eHLBu/1/
<div class="container">
<ul id="insurances">
<li><p><a href="conditions-form.html"><img src="img/estate-insurance.png">Ubezpieczenia nieruchomości</a></p></li>
<li><p><a href="conditions-form.html"><img src="img/estate-insurance.png">Ubezpieczenia nieruchomości</a></p></li>
<li><p><a href="conditions-form.html"><img src="img/estate-insurance.png">Ubezpieczenia nieruchomości</a></p></li>
</ul>
.container {
position: relative;
}
#insurances {
list-style-type: none;
width: auto;
}
#insurances li p {
margin: 0;
width: 200px;
margin: 0 auto;
}
#insurances li:nth-child(even) {
background: green;
}
#insurances li:nth-child(odd) {
background: grey;
}