Question

我的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'类与第一个列表中的列表并行。我的目的是让它与第一个列表并行。

Answer 1

Demo

在margin上使用否定.last。

Answer 2

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

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

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

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

<ul>
  <li>Something
    <ul>
       <li>Something else</li>
    </ul>
  </li>
</ul>

Answer 3

如果您将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;
}

Answer 4

将这些代码放入#content li.last style

position:absolute;
top:30px;
margin-left:300px;

Answer 5

你的代码工作正常，只需更改像@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/

css列表不合适

5 个答案: