Float средний список item right

Question

Я пытаюсь поплавать со списком справа. Таким образом, красный элемент с типом задания должен появиться рядом с синим элементом. Но когда я плаваю, это правильно, а справа - слева.

Так это то, что я сейчас

Когда я плавать правильно, я получаю это.

Так как я могу теперь корректно отобразить его?

Мой 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> 

Answer 1

Вы также можете управлять как это:

<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 для второго литий

Update

без изменения разметки вы можете сделать это, установив правильное значение, как this fiddle, но лучше бы изменения его заказ, на который ответил @zessx

Answer 2

Просто вернуть две свои последние столбцы:

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