Reputation: 687

Left and right aligned text in html menu items

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 ?

Upvotes: 2

Answers (4)

Nicolai Krüger

Reputation: 431

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>

Upvotes: 0

Himesh Aadeshara

Reputation: 2121

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

Upvotes: 2