尝试将下拉菜单放在左侧

Question

这是问题

我正试图将其排列如下：

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;

}

Answer 1

很难在没有编码器或小提琴的情况下确切地说出来但是试试这个

.editdeletetoogle .dropdown-menu{
    margin-top: -25px;
    width: 5px;
    position: relative;
    right:30px; /** Edit this **/
}

取消注释您之前的代码并相应地调整right

Answer 2

我曾遇到类似的问题，但是将 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;}