0

我的 HTML：

  <div id="content">
    <ul>
     <li>first list---ipsum ipsum ipsum<li>list inside list....ipsumipsumipsumipsum</li></li>
     <li class="last">last list content--ipsumipsumipsumipsum</li>
    </ul>
   </div>

我的 CSS：

   #content{
 padding:30px 0 25px 0;
}

   #content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
}

    #content li{
display:block;
float:left;
width:500px;
margin:0 45px 0 0;
}
    #content li.last{
width:290px;
float:right;
}

我得到的输出是带有“last”类的列表，与第一个列表中的列表平行。我的目的是让它与第一个列表平行。

4

5 回答 5

1

演示

margin对使用负数.last。

于 2012-10-16T12:06:45.440 回答
0

http://jsfiddle.net/calder12/eXFYY/

像那样？您正在浮动最后一个列表元素，您期望会发生什么？

#content li.last{
width:290px;
float:left;
}​

是的，仔细看看被搞砸的 HTML，你不应该在列表元素中包含列表元素。但是，您可以在列表元素中包含另一个列表，如下所示：

<ul>
  <li>Something
    <ul>
       <li>Something else</li>
    </ul>
  </li>
</ul>
于 2012-10-16T12:04:02.143 回答
0

如果您将 CSS 更改为此，它会执行您想要的操作。

#content ul{
    display:inline;
    margin:0;
    padding:0;
    list-style:none;
    position relative;   
}

#content li{
    float:left;
    width:500px;
    margin:0 45px 0 0;
}

#content li.last{
    width:290px;
    position:absolute;
    top:0;
    right:0;
    clear:both;
}
于 2012-10-16T12:08:18.900 回答
0

将这些代码放入#content li.last 样式中

position:absolute;
top:30px;
margin-left:300px;
于 2012-10-16T12:10:35.017 回答
0

您的代码可以正常工作，只需像@ZoltanToth 所说的那样更改 html 并减少 li 宽度

<div id="content">
 <ul>
   <li>first list---ipsum ipsum ipsum
       <ul>
           <li>list inside list....ipsumipsumipsumipsum</li>
       </ul>
   </li>
   <li class="last">last list content--ipsumipsumipsumipsum</li>
 </ul>
</div>​

http://jsfiddle.net/xBEQc/1/

于 2012-10-16T12:21:21.227 回答