Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 与其他元素对齐方式不同的Listelement_Html_Css_List_Nav - Fatal编程技术网

Html 与其他元素对齐方式不同的Listelement

Html 与其他元素对齐方式不同的Listelement,html,css,list,nav,Html,Css,List,Nav,我有一个基于列表的导航栏。 看起来是这样的: <ul runat="server" id="tabs"> <li class="test"> <a href="DetailView.aspx?call=104"><span class="tab"> <strong>EnterData</strong></span></a> </li> <li

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

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

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

我的清单如下:

<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> 
我的问题是:我能把这个项目做好吗?如果列表不起作用,我很乐意看到一种不同的解决方案。 我希望我能表现出我的问题是可以理解的。 谢谢你的回答

试试这个:

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

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

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

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

    您必须对齐整个列表项。这并不难;只需添加一些新类,如
    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部分。知道怎么做吗?看看上面布鲁克的答案。这是一种更好、更好的方式来实现你的期望。布鲁克·贝内特的回答很好,甚至更好。