在下拉选择菜单中调整位置

Question

我在下拉菜单选择框中面临CSS问题。我在下拉框视图中的位置不好。我的客户对此视图下拉框不满意。希望有人可以指导我解决问题。谢谢。

下面是我的编码：

<style>
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 70px;
  z-index: 9;
}
.dropdown-content a {
  display: block;
  background: #f1f1f1;
  text-decoration: none;
  color: black;
}
.dropdown {
  display: inline-block; /* Change display from block to inline-block */
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover #dropbtn {
  background-color: #3e8e41;
}
</style>


<div class="topnav">
<span id="curTime" class='hide'>&nbsp;</span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
<a href="#">Tetapan Umum</a>
<a href="#">Pengurusan Pengguna</a>
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>

我的输出显示如下图所示：

我希望结果如下图所示：

Answer 1

我在dropdown-content div内的锚点上添加了一些填充，并在div本身上添加了width: fit-content以确保其内的文本不会被剪切。

<style>
.dropdown-content {
  display: block;
  position: absolute;
  min-width: 70px;
  z-index: 9;
  width: fit-content;
}
.dropdown-content a {
  display: block;
  background: #f1f1f1;
  text-decoration: none;
  color: black;
  padding-left: 5px;
  padding-right: 5px;
}
.dropdown {
  display: inline-block; /* Change display from block to inline-block */
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover #dropbtn {
  background-color: #3e8e41;
}
</style>


<div class="topnav">
<span id="curTime" class='hide'>&nbsp;</span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
<a href="#">Tetapan Umum</a>
<a href="#">Pengurusan Pengguna</a>
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>