对齐方式与其他元素不同的列表元素

Question

我有一个基于列表的导航栏。看起来像这样：

我想知道如何在屏幕的正确位置获取注销列表点。我已经通过添加清晰的列表项进行了尝试，但这只是一个肮脏的解决方法，并不适用于所有屏幕分辨率。

我的列表是这样的：

<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

试试这个：

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

Answer 2

您可以在列表项上使用浮动将注销放在 header 的右侧，我最后使用 child 但您可以创建另一个 class 或将其内联在里:

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

文本对齐也适用于 li，但是您需要指定 li 的宽度才能使其看起来正确。

Answer 3

您必须对齐整个列表项。这并不难；只需添加一些新的 class，例如 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;">

对齐方式与其他元素不同的列表元素

Listelement with different alignment than others

html

css

list

nav