html - css リストの位置がずれている

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;
}

私が得る出力は、「最後の」クラスを持つリストであり、最初のリスト内のリストと並行しています。私の意図は、それを最初のリストと並行させることです。

Answer 1

デモ

でネガmarginを使用し.lastます。

Answer 2

あなたのコードは、@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/

Answer 3

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 4

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 5

これらのコードを #content li.last スタイルに入れます

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