在html菜单项左右对齐的文本

我需要的是菜单项，其中在same菜单项中左对齐的项目文本和右对齐的键盘快捷键，就像在任何计算机程序的经典菜单中一样。在html菜单项左右对齐的文本

HTML例如：

<nav> 
    <ul> 
     <li><a href="#">Menu 1</a> 
      <ul> 
      <li><a href="#" >menu item 1 ... &#8963&#8997 B</a></li> 
      <li><a href="#" >menu item 2 </a></li> 
      <li><a href="#" >menu item 3 </a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu 2</a> </li> 
    </ul> 
</nav>

我可否在<li>标记中的两个<a>标签的一个左，一个像这样右对齐文本？

<li> <a href="#"> menu item 1 ...</a> <a>&#8963&#8997 B</a> </li>

如何使用CSS实现此目的？

来源

2015-09-04 Ben

的是什么**应该图像**看，因为它目前还不清楚是什么你正在尝试做的一样在这里很有用。 –

在这里，我想在这里解决您的示例代码，我做以下它的工作

注：如果你的结构是一样的，你给那么你可能去吧或者你可以参考这个

.submenu{ 
 
    display:block; 
 
    width:160px; 
 
} 
 
ul.submenu li{ 
 
    background-color:green; 
 
    width:inherit; 
 
} 
 
ul.submenu li a:nth-child(odd){ 
 
    background-color:grey;  
 
} 
 
ul.submenu li a:nth-child(even){ 
 
    clear: right; 
 
    background-color: red; 
 
    float: right; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu 1</a> 
 
      <ul class="submenu"> 
 
      <li><a href="#"> menu item 1 ...</a> <a>&#8963&#8997 B</a></li> 
 
      <li><a href="#" >menu item 2 </a> <a>&#8963&#8997 C</a> </li> 
 
      <li><a href="#" >menu item 3 </a> <a>&#8963&#8997 D</a> </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 2</a> </li> 
 
    </ul> 
 
</nav>

My DEmo

来源

2015-09-04 07:37:53

@Ben请查看我的回答 –

我接受了Himesh Aadeshara anwer，因为它可以帮助我继续使用我的菜单。现在我知道如何在一个项目中左右对齐文本，谢谢。尽管如此，我仍然有一些麻烦将代码集成到我的菜单结构中。但我会稍后处理。 – Ben

@Ben很荣幸能帮助您随时问我们在这里通过我们的努力来帮助您 –

你不能只在一个特定的标签中做到这一点。你应该先定义父标签固定宽度，然后褐藻他们相应

看到这个位置：https://jsfiddle.net/5a6nnvxo/

即您可以尝试使用

float: right;

命令来实现您的目标。

来源

2015-09-04 07:16:58 rst

您可以使用CSS标记float来执行此操作。这里是fiddle

来源

2015-09-04 07:17:53 Genzotto

这是我该怎么做。只要把图标（无论是图片或文字或其他）在<span></span>

注意您不必使用span，一个div与ID或类作品一样好

li的宽度只是为了给出一个固定的大小。

span { 
 
    float: right; 
 
} 
 

 
li { 
 
    width: 200px; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu 1</a> 
 
      <ul> 
 
      <li><a href="#" >menu item 1 ... <span>&#8963&#8997 B</span></a></li> 
 
      <li><a href="#" >menu item 2 </a></li> 
 
      <li><a href="#" >menu item 3 </a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 2</a> </li> 
 
    </ul> 
 
</nav>

来源

2015-09-04 07:18:19

在html菜单项左右对齐的文本

回答

相关问题