所以我基本上想做一个列表,每个li都包含一个锚点和一个下拉菜单(使用bootstrap)。 li被包含在div中,div本身包含在ul中。我成功地将左侧的锚点对齐,我想对右侧的下拉列表做同样的事情,但它不起作用。这是结果,每个元素都有一个边框来显示其行为。
这是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>
...和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;
}
还有什么办法可以解决这个问题?谢谢!
答案 0 :(得分:0)
您可以在下拉列表中添加标准引导类“pull-right”。
然后它会是这样的:
<div class="dropdown pull-right">
我认为应该这样做。