Left and right aligned text in html menu items

Question

What I need are menu items where you have left aligned item text and right aligned keyboard shortcuts in the same menu item, like in classical menus of any computer programm.

html example :

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

Can I place in the <li> tag two <a> tags one for left and one for right aligned text like this ?

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

How to achieve this with CSS ?

Answer 1

here i tried to solve your example code here and i do following it's working

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

Answer 2

You can't do that in only one particular tag. You should first define a fixed width for the parent tag and then algin them accordingly

See this here: https://jsfiddle.net/5a6nnvxo/

Ie you could try to achieve your goal by using the

float: right;

command.

Answer 3

You can use CSS tag float to do this. Here is the fiddle

Answer 4

Here is how I would do it. Just put in the icon (be it image or text or whatever) in a <span></span>

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

The width of the li is just there to give a fixed size.

 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>