如何防止它<button>离开其父级的边界<div>？

Question

我在尝试向右浮动按钮时遇到了一个奇怪的问题；

未浮动：

无浮动http://puu.sh/3Afx1.png

向右浮动（我希望它出现在右下角，但仍在边界内）：

向右浮动http://puu.sh/3AfzF.png

HTML:

                <div class="portlet box red modify-menus-page-portlet">
                        <div class="portlet-title">
                            <div class="caption"><i class="icon-external-link"></i>Custom URL</div>
                        </div>
                        <div class="portlet-body" style="display: block;">
                        Add a menu link to a custom URL.
                        <br>
                        <br>
                            <div class="control-group">
                                <div class="controls">
                                    <input type="text" placeholder="Enter custom text..." class="m-wrap span12">
                                    <input type="text" placeholder="Enter custom URL..." class="m-wrap span12">
                                </div>
                            </div>
                        <button style="float:right;" class="btn red add-menu-link-button">Add <i class="icon-arrow-right"></i></button>
                        </div>
                </div>

CSS：

.modify-menus-page-portlet {
  margin-left: 24px;
}
.portlet.box.red {
border: 1px solid #ef8476;
border-top: 0;
}
.portlet.box {
padding: 0px !important;
}
.modify-menus-page-portlet {
margin-left: 24px;
}
.portlet {
clear: both;
margin-top: 0px;
margin-bottom: 25px;
padding: 0px;
}
.portlet.box .portlet-body {
background-color: #fff;
padding: 10px;
}
.portlet-body {
clear: both;
padding: 0;
}

Answer 1

将overflow:auto添加到您的.modify-menus-page-portlet规则：

.modify-menus-page-portlet {
    margin-left: 24px;
    overflow:auto;
}