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

这里我尝试在这里解决你的示例代码，并且我确实遵循了它的工作

注意：如果您的结构与您所提供的相同，那么您可以去吧，或者你可以参考这个

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<强> My DEmo

Answer 2

您不能只在一个特定标签中执行此操作。您应该首先为父标记定义固定宽度，然后相应地对它们进行algin

请在此处查看：https://jsfiddle.net/5a6nnvxo/

即。您可以尝试使用

来实现目标

float: right;

命令。

Answer 3

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

Answer 4

我将如何做到这一点。只需在<span></span>

中添加图标（无论是图片还是文字等）

注意您不必使用span，具有ID或类的div也可以正常使用

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>

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

4 个答案: