在html菜單項左右對齊的文本

我需要的是菜單項，其中在same菜單項中左對齊的項目文本和右對齊的鍵盤快捷鍵，就像在任何計算機程序的經典菜單中一樣。在html菜單項左右對齊的文本

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實現此目的？

來源

2015-09-04 Ben

的是什麼**應該圖像**看，因爲它目前還不清楚是什麼你正在嘗試做的一樣在這裏很有用。 –

在這裏，我想在這裏解決您的示例代碼，我做以下它的工作

注：如果你的結構是一樣的，你給那麼你可能去吧或者你可以參考這個

.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

來源

2015-09-04 07:37:53

@Ben請查看我的回答 –

我接受了Himesh Aadeshara anwer，因爲它可以幫助我繼續使用我的菜單。現在我知道如何在一個項目中左右對齊文本，謝謝。儘管如此，我仍然有一些麻煩將代碼集成到我的菜單結構中。但我會稍後處理。 – Ben

@Ben很榮幸能幫助您隨時問我們在這裏通過我們的努力來幫助您 –

你不能只在一個特定的標籤中做到這一點。你應該先定義父標籤固定寬度，然後褐藻他們相應

看到這個位置：https://jsfiddle.net/5a6nnvxo/

即您可以嘗試使用

float: right;

命令來實現您的目標。

來源

2015-09-04 07:16:58 rst

您可以使用CSS標記float來執行此操作。這裏是fiddle

來源

2015-09-04 07:17:53 Genzotto

這是我該怎麼做。只要把圖標（無論是圖片或文字或其他）在<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>

來源

2015-09-04 07:18:19

在html菜單項左右對齊的文本

回答

相關問題