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

Question

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

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 实现此目的？

Answer 1

你不能只在一个特定的标签中这样做。您应该首先为父标签定义一个固定宽度，然后相应地对它们进行algin

看这里：https://jsfiddle.net/5a6nnvxo/

即您可以尝试使用

来实现您的目标

float: right;

命令。

Answer 2

您可以使用 CSS 标签 float 来做到这一点。这是 fiddle

Answer 3

这是我的做法。只需在 <span></span>

中放入图标（无论是图片还是文字或其他）

NOTE You don't have to use span, a div with an ID or Class works just as well

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>

Answer 4

我在这里尝试解决您的示例代码，我确实在努力工作

Note: if your structure would be same as you have given then you may go for it or you can refer this

.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

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

Left and right aligned text in html menu items

html

css

nav