下拉菜单不在所选下拉按钮的中心

Question

I'm making a dropdown menu, but the dropdown menu for my LinkButton1 is not aligned with the button itself when clicked (it drops down below the first button instead). 我正在创建一个下拉菜单，但是单击时，我的LinkButton1的下拉菜单与按钮本身不对齐（而是下拉到第一个按钮下方）。 I'm using bootstrap by the way. 我正在使用引导程序。

Here are my codes: 这是我的代码：

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

(Side note: I added a google translator API at the right side) （旁注：我在右侧添加了一个Google Translator API）

How do I align my Linkbutton's dropdown menu with the Linkbutton itself, instead of the first button? 如何将我的Linkbutton的下拉菜单与Linkbutton本身而不是第一个按钮对齐？

Here is how it looks like when i click the 2nd button- the dropdown menu appears under the 1st button: 这是当我单击第二个按钮时的样子-下拉菜单出现在第一个按钮下面：

Answer 1

Check this if it helps you 检查是否有帮助

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