时间戳

首页 > 解决方案 > 在下拉选择菜单中调整位置

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

问题描述

我在下拉菜单选择框中面临 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>

我的输出如下图所示：

输出 1

我预计结果如下图所示：

输出 2

标签： htmlcss

解决方案

我已经在dropdown-contentdiv 内的锚点和 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>

推荐阅读