下拉菜單不在所選下拉按鈕的中心

Question

我正在創建一個下拉菜單，但是單擊時，我的LinkButton1的下拉菜單與按鈕本身不對齊（而是下拉到第一個按鈕下方）。 我正在使用引導程序。

這是我的代碼：

 <div class="dropdown" >  
   <ul>      <li> 
         <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's
 <span class="caret"></span></button>
 <ul class="dropdown-menu ">
  <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
  </ul>
             </li>


             <li>
                 <asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton> 
                 <ul class="dropdown-menu ">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
  </ul>

             </li>

       <li>
           <ul class="nav navbar-right">

                    <li id="google_translate_element"></li><script type="text/javascript">
                                                               function googleTranslateElementInit() {
                                                                   new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element');
                                                               }
              </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

                </ul> 
       </li>
        </ul>

（旁注：我在右側添加了一個Google Translator API）

如何將我的Linkbutton的下拉菜單與Linkbutton本身而不是第一個按鈕對齊？

這是當我單擊第二個按鈕時的樣子-下拉菜單出現在第一個按鈕下面：

Answer 1

檢查是否有幫助

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="list-inline"> <li> <div class="dropdown" > <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's <span class="caret"></span></button> <ul class="dropdown-menu "> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </li> <li> <div class="dropdown" > <asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton> <ul class="dropdown-menu "> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </li> <!--<li> <div class="dropdown" > <ul class="nav navbar-right"> <li id="google_translate_element"></li><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </ul> </div> </li>--> </ul> </div> </body> </html>

下拉菜單不在所選下拉按鈕的中心

問題描述

1 個解決方案

解決方案1
0 已采納 2016-07-14 09:31:46

下拉菜單不在所選下拉按鈕的中心

問題描述

1 個解決方案

解決方案1 0 已采納 2016-07-14 09:31:46

解決方案1
0 已采納 2016-07-14 09:31:46