Question

如何对齐左边的最后一行，保持第一行对齐？

此代码：

<ul style="position:inline-block; text-align:center; width:120px; background-color:green; margin:0; padding:0;">
        <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> 
    <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> 
       <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> 
       <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> 
       <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> 

</ul>

http://jsfiddle.net/vinoli/59cLmvxo/

Answer 1

为您的代码添加一个ID，例如直接在styles.css中引用它，然后像往常一样使用左对齐。

或者，您可以专门为该项目添加内联样式，而不仅仅是您的ul。像这样：

<il style="position:inline-block; text-align:left; width:120px; background-color:green; padding:5px;"> <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px"> </il>

Answer 2

您可以定位列表的最后一项，例如：

HTML：

<ul class="myList">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

的CSS：

ul.myList li { background-color: #ff0000; }
ul.myList li:last-child { background-color: #00ff00; }

为每个案例添加你想要的CSS。

fiddle

Answer 3

它是li标签，而不是il，请不要使用内联样式而不是css文件。您可以放置一条带有居中图像的线条，一条带有图像的线条对齐左侧，如：

＆＃13;

ul {
    position:inline-block;
    width:120px;
    background-color:green;
    padding:5px;
    list-style: none;
}
.align-left: {
    text-align: left;
}
.align-center {
    text-align: center;
}
img {
    width: 33px;
    display: inline-block;
}

＆＃13;

<ul>
    <li class="align-center">
        <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
         <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
         <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
    </li>
    <li class="align-left">
        <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
         <img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
    </li>
</ul>

＆＃13;

内联块语句（最后一行）

3 个答案: