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翻译API）

如何将Linkbutton的下拉菜单与Linkbutton本身对齐，而不是第一个按钮？

以下是我点击第二个按钮时的样子 - 下拉菜单出现在第一个按钮下：

Answer 1

检查这是否有帮助

＆＃13;

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

＆＃13;

下拉菜单不以所选下拉按钮为中心

1 个答案: