Html 无法定位<;按钮>;内部a<;李>;
所以我基本上想做一个列表,每个li包含一个锚和一个下拉菜单(使用引导)。li包含在一个div中,其本身包含在ul中。我成功地对齐了左边的锚,我想对右边的下拉列表做同样的事情,但它不起作用。结果是,每个元素都有一个边框来可视化其行为 这是htmlHtml 无法定位<;按钮>;内部a<;李>;,html,css,twitter-bootstrap,drop-down-menu,Html,Css,Twitter Bootstrap,Drop Down Menu,所以我基本上想做一个列表,每个li包含一个锚和一个下拉菜单(使用引导)。li包含在一个div中,其本身包含在ul中。我成功地对齐了左边的锚,我想对右边的下拉列表做同样的事情,但它不起作用。结果是,每个元素都有一个边框来可视化其行为 这是html <ul> <li class="list_items"><a href="data/'.$file.'" download target="_blank">'.$location.'</a>
<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;
}
ul
{
显示:内联块;
填充:0;
左边距:20px;
右边距:0;
垂直对齐:顶部;
宽度:240px;
字体系列:Verdana;
文本对齐:对齐;
列表样式类型:无;
}
#列表框//包含整个列表的div
{
右边框:2px实心#b2dba1;
边框底部:2px实心#b2dba1;
左边框:2px实心#b2dba1;
边界半径:0 0 6px 6px;
宽度:230px;
左边距:5px;
垫底:5px;
垫面:5px;
背景:rgba(206232196,0.7);
右边填充:0;
}
.列出项目//所有
{
垫底:5px;
左边距:5px;
宽度:100%;
边框:1px红色虚线;
}
ul.列出项目。下拉按钮
{
位置:相对位置;
右:2px;
右边距:0;
边框:1px纯黑;
}
.下拉列表//包含按钮的div
{
显示:内联块;
保证金:0;
填充:0;
职位:相对!重要;
右:0!重要;
边框:1px纯蓝色;
}
还可以做些什么来解决这个问题?谢谢 您可以在下拉列表中添加标准引导类“pull right” 然后它会像这样:
我想这就够了。你能做个小提琴吗?哼,我从来没做过。我的代码是通过ajax动态调用的:问题是下拉按钮比文本高。通过将类“行”添加到列表中,可以防止此类问题。我已经做了一个JSFIDLE示例:好吧,哇,它看起来几乎完美,几分钟后就会确认!非常感谢Skeevs,它可以工作,我只需将锚定位得低一点,使其与按钮对齐即可!