twitter-bootstrap 无法将 <button> 定位在 <li> 内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25089554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not able to position <button> inside a <li>
提问by jonathanGB
So I basically want to do a list, each li containing an anchor and a dropdown menu (using bootstrap). The li are contained into a div, itself contained into a ul. I successfully aligned the anchors on the left, and I would like to do the same thing for the dropdowns on the right, but it's not working. Here's the result, each element with a border to visualize its behaviour.
所以我基本上想做一个列表，每个 li 包含一个锚点和一个下拉菜单（使用引导程序）。li 包含在一个 div 中，它本身包含在一个 ul 中。我成功地对齐左侧的锚点，我想对右侧的下拉菜单做同样的事情，但它不起作用。这是结果，每个元素都有一个边框来可视化其行为。
Here's the html...
这是html...
<ul>
<li class="list_items"><a href="data/'.$file.'" download target="_blank">'.$location.'</a>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
More info <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<!-- items of the dropdown menu -->
</ul>
</div>
</li>
<!-- repeat... -->
</ul>
... and the css
...和CSS
ul
{
display: inline-block;
padding: 0;
margin-left: 20px;
margin-right:0;
vertical-align: top;
width:240px;
font-family: Verdana;
text-align: justify;
list-style-type: none;
}
#list_box // div containing the whole list
{
border-right: 2px solid #b2dba1;
border-bottom: 2px solid #b2dba1;
border-left: 2px solid #b2dba1;
border-radius: 0 0 6px 6px;
width: 230px;
margin-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
background: rgba(206,232,196,0.7);
padding-right:0;
}
.list_items // all the <li>
{
padding-bottom: 5px;
margin-left: 5px;
width: 100%;
border: 1px dashed red;
}
ul .list_items .dropdown button
{
position: relative;
right: 2px;
margin-right: 0;
border: 1px solid black;
}
.dropdown // div containing the button
{
display: inline-block;
margin: 0;
padding: 0;
position: relative !important;
right: 0 !important;
border: 1px solid blue;
}
What else could be done to solve this problem? Thanks!
还有什么办法可以解决这个问题？谢谢！
采纳答案by Skeevs
You could add the standard bootstrap class 'pull-right' at the dropdown div.
您可以在下拉 div 中添加标准引导程序类“pull-right”。
Then it will look like this:
<div class="dropdown pull-right">
然后它看起来像这样：
<div class="dropdown pull-right">
I think that should do the trick.
我认为这应该可以解决问题。
