这是问题
我正试图将其排列如下:
HTML
<li class='list-group-item'>
<!-- The dropdown toogle button for the edit / delete options -->
<div class="btn-group editdeletetoogle">
<button type="button" class="btn btn-default-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
CSS:
.editdeletetoogle .dropdown-toggle
{
width: 20px;
height: 20px;
margin:0;
padding:0;
top:-30px;
right:-30px;
z-index: 10;
color: black;
background-color: transparent;
}/* '' delimiter */
.editdeletetoogle .dropdown-item
{
font-size: 15x;
padding:0px 0px 0px 10px;
width: 5px;
/* position: relative;
float:left;
width: 2%;*/
}
.editdeletetoogle .dropdown-menu
{
margin-top: -25px;
width: 5px;
/* position: relative;
float:left;
width: 2%;*/
/*right: -50px;*/
}
我尝试放置显示块,但这会导致永久显示下拉菜单,而不是单击按钮时。
试过这个:
.editdeletetoogle .dropdown-menu
{
margin-top: -5px;
width: 5px;
position: relative;
right: 20px;
/* position: relative;
float:left;
width: 2%;*/
/*right: -50px;*/
}
但是得到以下内容:
当我尝试:
.editdeletetoogle .dropdown-item
{
font-size: 15x;
padding:0px 0px 0px 10px;
width: 5px;
position: relative;
right: 20px;
/* position: relative;
float:left;
width: 2%;*/
}
我得到了:
解决:
<div class="dropdown-menu pull-right">
<a class="dropdown-item" href="#">Edit</a><div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Delete</a>
</div>
.editdeletetoogle .dropdown-menu
{
margin-top: -25px;
right: -30px;
width: 60px !important;
max-width: 60px;
min-width: 60px;
border-radius: 0px;
}
答案 0 :(得分:1)
很难在没有编码器或小提琴的情况下确切地说出来但是试试这个
.editdeletetoogle .dropdown-menu{
margin-top: -25px;
width: 5px;
position: relative;
right:30px; /** Edit this **/
}
取消注释您之前的代码并相应地调整right
答案 1 :(得分:0)
我曾遇到类似的问题,但是将 left:标记修复为我。
.sub-menu {
border-radius: 5px;
border: solid 1px rgba(144, 144, 144, 0.25);
width: 26%;
padding: 5px 0px;
position: absolute;
top: 90%;
left: 50%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #ffffff;}