CSS - 绝对定位问题

自由之星

在此处输入图片说明

我想明白为什么列表中的下拉菜单中没有调整到导航项目的左底边正确。

(我已经尝试添加left: 0px.dropdown-menu水平间隙正常工作的方法,但我不知道如何处理垂直间隙。)

.navbar {
  padding-left: 0;
  list-style-type: none;
  background-color: #252525;
  font-size: 0;
  /* to remove white-space gap between child blocks */
}

.navitem {
  font-size: 1.0rem;
  /* root eM*/
  margin: 0;
  padding: 10px;
  text-align: center;
  display: inline-block;
  color: white;
  cursor: pointer;
}

.navitem:hover {
  background-color: black;
}

.dropdown {
  position: relative;
  border: 1px solid red;
}

.dropdown-menu {
  padding: 0;
  /*left:0px;*/
  position: absolute;
  min-width: 100%;
  text-align: left;
  list-style-type: none;
  background-color: #252525;
}
<ul class="navbar">
  <li class="navitem link">Link1</li>
  <li class="navitem link">Link2</li>
  <li class="navitem link">Link3</li>
  <li class="navitem dropdown">
    <div>Dropdown</div>
    <ul class="dropdown-menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>

  </li>
</ul>

冷水机

加入top: 100%;这将使下拉菜单开始在底部下拉

并添加right: 0;left:0;使其从下拉菜单的两侧开始

见代码片段:

.navbar {
  padding-left: 0;
  list-style-type: none;
  background-color: #252525;
  font-size: 0;
  /* to remove white-space gap between child blocks */
}

.navitem {
  font-size: 1.0rem;
  /* root eM*/
  margin: 0;
  padding: 10px;
  text-align: center;
  display: inline-block;
  color: white;
  cursor: pointer;
}

.navitem:hover {
  background-color: black;
}

.dropdown {
  position: relative;
  border: 1px solid red;
}

.dropdown-menu {
  padding: 0;
  /*left:0px;*/
  position: absolute;
  min-width: 100%;
  text-align: left;
  list-style-type: none;
  background-color: #252525;
  top: 100%;
  right: 0;
}
<ul class="navbar">
  <li class="navitem link">Link1</li>
  <li class="navitem link">Link2</li>
  <li class="navitem link">Link3</li>
  <li class="navitem dropdown">
    <div>Dropdown</div>
    <ul class="dropdown-menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>

  </li>
</ul>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS旋转变换导致绝对定位的边距问题

来自分类Dev

使用CSS定位绝对和相对元素

来自分类Dev

CSS定位问题

来自分类Dev

在CSS中定位的问题

来自分类Dev

CSS:按基线绝对定位文本吗?

来自分类Dev

CSS3列中的绝对定位

来自分类Dev

CSS绝对定位和调整窗口大小

来自分类Dev

CSS定位(相对,绝对内部相对)+重叠问题?

来自分类Dev

CSS绝对定位(4颗钻石并列)

来自分类Dev

没有绝对定位的纯CSS代码

来自分类Dev

CSS转换,绝对定位和:target的问题

来自分类Dev

CSS绝对定位之谜

来自分类Dev

CSS定位问题

来自分类Dev

绝对/相对定位问题

来自分类Dev

CSS绝对定位和身体滚动

来自分类Dev

CSS绝对定位,什么是“非静态定位祖先”?

来自分类Dev

CSS旋转变换导致绝对定位的边距问题

来自分类Dev

CSS“绝对”定位边框图像

来自分类Dev

CSS / JavaScript绝对与固定位置

来自分类Dev

如何css绝对定位正确的方法

来自分类Dev

CSS绝对位置未定位按钮

来自分类Dev

使用CSS定位div:使用绝对定位div的布局问题

来自分类Dev

CSS:按基线绝对定位文本吗?

来自分类Dev

如何使用CSS下推绝对定位的div

来自分类Dev

如何不使用绝对定位CSS

来自分类Dev

CSS 绝对定位表格中的表格

来自分类Dev

CSS 定位——绝对的混乱

来自分类Dev

在 CSS Grid 中将绝对定位的元素居中

来自分类Dev

css body 边框,绝对定位干扰