在html菜单项左右对齐的文本
我需要的是菜单项,其中在same
菜单项中左对齐的项目文本和右对齐的键盘快捷键,就像在任何计算机程序的经典菜单中一样。在html菜单项左右对齐的文本
HTML例如:
<nav>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#" >menu item 1 ... ⌃⌥ 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>⌃⌥ B</a> </li>
如何使用CSS实现此目的?
在这里,我想在这里解决您的示例代码,我做以下它的工作
注:如果你的结构是一样的,你给那么你可能 去吧或者你可以参考这个
.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>⌃⌥ B</a></li>
<li><a href="#" >menu item 2 </a> <a>⌃⌥ C</a> </li>
<li><a href="#" >menu item 3 </a> <a>⌃⌥ D</a> </li>
</ul>
</li>
<li><a href="#">Menu 2</a> </li>
</ul>
</nav>
@Ben请查看我的回答 –
我接受了Himesh Aadeshara anwer,因为它可以帮助我继续使用我的菜单。现在我知道如何在一个项目中左右对齐文本,谢谢。尽管如此,我仍然有一些麻烦将代码集成到我的菜单结构中。但我会稍后处理。 – Ben
@Ben很荣幸能帮助您随时问我们在这里通过我们的努力来帮助您 –
你不能只在一个特定的标签中做到这一点。你应该先定义父标签固定宽度,然后褐藻他们相应
看到这个位置:https://jsfiddle.net/5a6nnvxo/
即您可以尝试使用
float: right;
命令来实现您的目标。
这是我该怎么做。只要把图标(无论是图片或文字或其他)在<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>⌃⌥ 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>
的是什么**应该图像**看,因为它目前还不清楚是什么你正在尝试做的一样在这里很有用。 –