引導程序下拉列表中同一行上的左右對齊文本

桌面應用程序中的菜單很常見，以顯示左側的操作名稱和右側的鍵盤快捷鍵like this。引導程序下拉列表中同一行上的左右對齊文本

我想在Bootstrap下拉菜單中做同樣的事情。但是，我似乎無法讓它工作。我嘗試了幾件事情。這裏是兩個最近的嘗試和a link to a demo的代碼。

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li> 
     <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Long long long long long label</a></li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 2 <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#"><span class="pull-left">Label</span><span class="text-muted pull-right">Alt+P</span></a></li> 
     <li><a href="#"><span class="pull-left">Long long long long long label</span><span class="text-muted pull-right">Alt+P</span></a></li> 
    </ul> 
    </li> 
</ul>

再次，here's a link to a demo。

Try 1和Try 2適用於短標籤，但不適用於長標籤。

用Try 1，問題是the label and the shortcut overlap。

隨着嘗試2，問題是，the shortcut gets pushed to another line，還有一些怪異的懸停在項目上。

我想要的是它全部在一條線上，所以你看到類似this（該圖像只是我在GIMP中製作的一個假圖）。

來源

2013-12-08 dumbmatter

我嘗試了很多方法來獲得Bootstrap類的結果，但我認爲你需要一些自定義CSS。這裏有一個例子：

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Label <span class="kbd text-muted">Alt+S</span></a></li> 
     <li><a href="#">Not labeled</a></li> 
     <li><a href="#">Long long long long long label <span class="kbd text-muted">Alt+L</span></a></li> 
     </ul> 
    </li> 
    </ul>

.dropdown-menu > li > a { 
    position: relative; 
    padding-right: 70px; 
} 
.dropdown-menu > li > a > span.kbd { 
    position: absolute; 
    right: 20px; 
    top: 3px; 
}

Updated Bootply

來源

2013-12-09 11:19:21 zessx

你可以看一下http://bootply.com/99291

，並期待這樣的代碼：

<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li> 
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span><span style="white-space: normal;">Long long long long long label</span></a></li> 
    </ul>

你很長的文本是一個跨度纏上<span style="white-space: normal;">

是否呈現你想要的東西好？

來源

2013-12-08 21:07:42 pbenard

我本來應該在原來的職位更清晰，我也想對所有在一行上。我會編輯我的問題。謝謝！ – dumbmatter

引導程序下拉列表中同一行上的左右對齊文本

回答

相關問題