为什么 HTML CSS 下拉菜单在设置 float:right 时不向右对齐？

Question

我正在使用 CSS 在页面右上角创建一个下拉菜单。但是下拉菜单的右侧部分不在可见区域。我试过 float:right;在每个 CSS 块中，但菜单的一半仍然不在屏幕上。

 <style>
                            .dropbtn {
                            padding: 16px;
                            border: none;
                            }

                            .dropdown {
                            position: relative;
                            display: inline-block;
                            float:right;
                            }

                            .dropdown-content {
                            display: none;
                            position: absolute;
                            background-color: #f1f1f1;
                            min-width: 160px;
                            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                            z-index: 1;
                            float:left;
                            }

                            .dropdown-content a {
                            color: black;
                            padding: 12px 16px;
                            text-decoration: none;
                            display: block;
                            float:left;
                            }

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

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

                            .dropdown:hover .dropbtn {}
                        </style>

                           <div class="dropdown">
                                <img id="imgExtSettings" class="dropbtn" style="width:60px;height:60px;cursor:pointer;padding:10px;" src="https://findicons.com/files/icons/2146/realistik_reloaded/128/gear.png"></img>
                                <div class="dropdown-content">
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>

任何人都可以找到我在这里做错了什么吗？

Answer 1

在 .dropdown-content

中进行更改

.dropdown-content {
    display: none;
    position: relative;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    float:left;
}

make position:relative 这样它的 space 将包含在 html 中。这将确保其下拉内容可见。

Answer 2

部分下拉菜单被隐藏的原因是 position: absolute; 属性。由于下拉菜单位于屏幕的最右侧，并且下拉菜单的宽度为 160px，因此它在视口之外流动。考虑将 right: 0 放在 .dropdown-content 上。在下面的代码中，我还删除了一些多余的 float: left 属性。希望这是您的预期输出。

.dropbtn {
  border: none;
  width: 60px;
  height: 60px;
  cursor: pointer;
  padding: 10px;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

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

<div class="dropdown">
  <img id="imgExtSettings" class="dropbtn" src="https://findicons.com/files/icons/2146/realistik_reloaded/128/gear.png" />
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

为什么 HTML CSS 下拉菜单在设置 float:right 时不向右对齐？

Why HTML CSS dropdown menu not aligns to the right when float:right is set?

html

css

drop-down-menu