浮動中間列表項右

我想漂浮中間列表項右。所以帶有職位的紅色項目應該在藍色項目旁邊。但是，當我把它浮起來的時候，它把它放在藍色的而不是左邊。浮動中間列表項右

原來這就是我現在

So this is what I have now

當我浮動是正確的我得到這個。

When I float it right I get this.

所以，我怎麼能現在可以正確顯示呢？

我SCSS

.credit-list-main{ 
    list-style:none; 
    padding:0; 
    font-size:13px; 

    >li.credit-list-company{ 
     list-style:none; 

     >h3{ 
      font-weight:bold; 
      font-size:13px; 
     } 

     >ul.credit-list-person{ 

      list-style:none; 
      padding:0; 
      padding-left:5px; 

      >li{ 
       display:inline; 
      } 
      /*Person name*/ 
      >li:nth-child(1){ 
       background:green; 
      } 
      /*Job title*/ 
      >li:nth-child(2){ 
       background:red; 
       float:right; 
      } 
      /*Person nav*/ 
      >li:nth-child(3){ 
       background:blue; 
       float:right; 
      } 
     } 
    } 

}

HTML

<ul class="credit-list-main"> 
         <li class="credit-list-company"> 
          <h3>Management</h3> 
          <ul class="credit-list-person"> 
           <li>Cevat Yerli</li> 
           <li>CEO & President</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Avni Yerli</li> 
           <li>Managing Director</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Faruk Yerli</li> 
           <li>Managing Director</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
         </li> 
         <li class="credit-list-company"> 
          <h3>Programming Team</h3> 
          <ul class="credit-list-person"> 
           <li>Filipe Amim</li> 
           <li>Game Programmer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Sandy Brand</li> 
           <li>Senior AI/Game Programmer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Dean Claassen</li> 
           <li>Senior Interface Programmer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Fernando Colomer</li> 
           <li>Senior Game Programmer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Sandy Brand</li> 
           <li>Senior AI/Game Programmer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
         </li> 
         <li class="credit-list-company"> 
          <h3>Research & Development</h3> 
          <ul class="credit-list-person"> 
           <li>Christopher Balte</li> 
           <li>Software Engineer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Iva Zoltan Frey</li> 
           <li>Lead Animation Engineer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Iva Herzeg</li> 
           <li>Lead Animation Engineer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
          <ul class="credit-list-person"> 
           <li>Christopher Balte</li> 
           <li>Software Engineer</li> 
           <li><a href="#"><i class="icon-edit"></i></a></li> 
          </ul> 
         </li> 
        </ul>

來源

2013-08-28 Sharpless512

用你的代碼http://www.jsfiddle.net會讓我們很容易嘗試和修復。 – Itay

你有沒有試過把人的導航提前在你的scss – otherDewi

職位的標題@otherDewi這完全解決了它。沒想到那很簡單。謝謝！ – Sharpless512

您還可以管理這樣的：

<ul class="credit-list-person"> 
<li>Cevat Yerli</li> 
<span> 
<li>CEO & President</li> 
<li><a href="#"><i class="icon-edit"></i></a></li> 
</span> 
</ul>

然後給float: right到span再經過申請float: left爲第一李和float: right爲第二李

更新

不改變，你可以通過設置權值this fiddle但更好的做到這一點的標記將被改變它的順序由@zessx回答

來源

2013-08-28 07:39:26

簡單地恢復你的最後兩列：

<ul class="credit-list-person"> 
    <li>Cevat Yerli</li> 
    <li><a href="#"><i class="icon-edit"></i></a></li> 
    <li>CEO & President</li> 
</ul>

來源

2013-08-28 07:36:31 zessx

浮動中間列表項右

回答

相關問題