问答详情
源自：5-5 下拉菜单（对齐方式）

我设置dropdown-menu-right后整个ul跑到浏览器最右边了

我设置dropdown-menu-right后整个ul跑到浏览器最右边了，说好的与父容器对齐呢，然后我看了.dropdown-menu添加了浮动属性，它的位置已经不再父元素之内了啊

提问者：刘洪光 2016-08-26 18:13

个回答

  • Colorfulday
    2016-09-04 12:03:16

    给div.dropdown添加右浮动样式

    style="float:right;"


    0
  • 没有冰激凌的夏天不完整
    2016-08-27 10:36:17

    为了方便看父容器位置，你可以给div添加边框，希望能帮到你

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐方式</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>使用pull-right类使下拉菜单与父容器右边对齐</h4>
 <div class="dropdown" style="border:1px solid #ccc">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>
<br />
<br />
<h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4>
<div class="dropdown" style="border:1px solid #ccc">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 
<br />
<br />
<h4>下拉菜单与父容器左边对齐</h4>
<div class="dropdown" style="border:1px solid #ccc">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  
      <div class="dropdown" style="border:1px solid #ccc">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdown2"
          data-toggle="dropdown">
              食物
              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right ">
              <li role="presenttation">水果</li>
              <li role="presentation">苹果</li>
          </ul>
      </div>
  </body>
</html>


    2