Question

我需要像图片中那样对齐我的列表项（在下拉列表中）。

menu

正如你所看到的那样，它们是居中的，但是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;

}

感谢任何提案

Answer 1

迅速嘲笑某事，可能这就是你要找的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; 
}

对齐中心和左侧的元素

1 个答案: