与其他人不同的听众

时间:2015-10-19 12:52:34

标签: html css list nav

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

enter image description here

我想知道如何在屏幕右侧网站上获取Logout列表点。我已经通过添加清晰的listitems来尝试它,但这只是一个肮脏的解决方法,并不适用于每个屏幕分辨率。

我的列表如下:

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

我的问题是:我能把这个项目搞定吗?如果这不适用于列表,我会很高兴看到一种不同的解决方案。 我希望我能够表明我的问题是可以理解的。 谢谢你的回答!

3 个答案:

答案 0 :(得分:5)

您可以使用列表项上的浮点数在标题的右侧进行注销,我使用了最后一个孩子,但您可以创建另一个类或将其内联在li上:

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

文本对齐也适用于li,但是你需要指定li的宽度才能让它看起来正确。

答案 1 :(得分:1)

试试这个:

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

答案 2 :(得分:1)

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

,也可以将其设置为内联样式