![](/img/trans.png)
[英]CSS/HTML - Text on drop down menu goes right even though I aligned it left
[英]Left and right aligned text in html menu items
我需要的是在same
菜單項中左對齊的項目文本和右對齊的鍵盤快捷鍵的菜單項,就像在任何計算機程序的經典菜單中一樣。
html示例:
<nav>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#" >menu item 1 ... ⌃⌥ 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>⌃⌥ B</a> </li>
如何使用 CSS 實現這一點?
在這里,我嘗試在這里解決您的示例代碼,並且我確實按照它的工作原理進行操作
注意:如果您的結構與您給出的結構相同,那么您可以選擇它,或者您可以參考此
.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>⌃⌥ B</a></li> <li><a href="#" >menu item 2 </a> <a>⌃⌥ C</a> </li> <li><a href="#" >menu item 3 </a> <a>⌃⌥ D</a> </li> </ul> </li> <li><a href="#">Menu 2</a> </li> </ul> </nav>
你不能只在一個特定的標簽中做到這一點。 您應該首先為父標簽定義一個固定寬度,然后相應地調整它們
在這里看到這個: https : //jsfiddle.net/5a6nnvxo/
即您可以嘗試通過使用
float: right;
命令。
您可以使用 CSS 標記float
來執行此操作。 這是小提琴
這是我將如何做到的。 只需在<span></span>
放入圖標(無論是圖像或文本或其他)
注意您不必使用
span
,帶有 ID 或 Class 的div
也可以使用
li
的寬度只是為了給出一個固定的大小。
span { float: right; } li { width: 200px; }
<nav> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#" >menu item 1 ... <span>⌃⌥ 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.