簡體   English   中英

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

[英]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 ...  &#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 實現這一點?

在這里,我嘗試在這里解決您的示例代碼,並且我確實按照它的工作原理進行操作

注意:如果您的結構與您給出的結構相同,那么您可以選擇它,或者您可以參考此

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

我的演示

你不能只在一個特定的標簽中做到這一點。 您應該首先為父標簽定義一個固定寬度,然后相應地調整它們

在這里看到這個: 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>&#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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM