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

【问题标题】：Left and right aligned text in html menu itemshtml菜单项中的左右对齐文本
【发布时间】：2015-09-04 07:06:48
【问题描述】：

我需要的是在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 实现这一点？

【问题讨论】：

一张假定的图像在这里会很有用，因为不清楚您要做什么。

标签： html css nav

【解决方案1】：

我在这里尝试解决您的示例代码，并且我按照它的工作原理进行操作

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

.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

【讨论】：

@Ben 请查看我的回答
我接受了 Himesh Aadeshara anwer，因为它可以帮助我最好地继续我的菜单。现在我知道如何在一个项目中左右对齐文本，谢谢。将该代码集成到我的菜单结构中仍然存在一些麻烦。但我稍后会处理。
@Ben 很荣幸为您提供帮助，请随时要求我们随时为您提供帮助

【解决方案2】：

你不能只在一个特定的标签中做到这一点。您应该首先为父标签定义一个固定的宽度，然后相应地调整它们

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

即您可以尝试使用

来实现您的目标

float: right;

命令。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我会这样做。只需在 <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>

【讨论】：