Listelement с разным расположением, отличным от других

Question

У меня есть панель навигации, основанная на списке. Сходство что:

мне интересно, как я могу получить Выход listpoint на нужное место экрана. Я уже пробовал это, добавив четкие списки, но это всего лишь грязное обходное решение и не работает для каждого разрешения экрана.

Мой список выглядит следующим образом:

<ul runat="server" id="tabs"> 
    <li class="test"> 
    <a href="DetailView.aspx?call=104"><span class="tab"> 
     <strong>EnterData</strong></span></a> 
    </li> 
    <li class="test"> 
    <a href="Overview.aspx"><span class="tab"> 
    <strong>Overview</strong></span></a> 
    </li> 
    <li class="test"> 
    <a href="Logout.aspx"><span class="tab"> 
    <strong style="text-align: right">Logout</strong></span></a> 
    </li> 
</ul> 

Мой Вопрос: Могу ли я получить этот пункт не так ли? Если это не будет работать со списком, я был бы рад увидеть способ решения проблем. Надеюсь, я смог показать свою проблему понятной. Спасибо за ваши ответы!

Answer 1

Вы можете использовать поплавок на элементе списка, чтобы поместить выход из системы в правой части заголовка, я использовал последний ребенок, но вы можете создать другой класс или поместить его в линии на литии :

.test:last-child{ 
    float:right; 
} 

Выравнивание текста также будет работать на литий, однако вы должны указать ширину Li, чтобы заставить его выглядеть правильно.

Answer 2

Попробуйте это:

<li class="test" style="text-align: right"> 
<a href="Logout.aspx"><span class="tab"><strong>Logout</strong></span></a> 
</li> 

Answer 3

Вы должны выровнять весь элемент списка. Это не сложно; просто добавьте новый класс, например floatRight.

<ul runat="server" id="tabs"> 
     <li class="test"> 
     <a href="DetailView.aspx?call=104"><span class="tab"> 
      <strong>EnterData</strong></span></a> 
     </li> 
     <li class="test"> 
     <a href="Overview.aspx"><span class="tab"> 
     <strong>Overview</strong></span></a> 
     </li> 
     <li class="test floatRight"> 
     <a href="Logout.aspx"><span class="tab"> 
     <strong style="text-align: right">Logout</strong></span></a> 
     </li> 
    </ul> 

И CSS:

.floatRight{float:right;} 

Вы можете стилизовать рядный тоже, если вы действительно хотите: <li class="test" style="float:right;">