如何解决 CSS 下拉边框错误？

Question

.dropdown {
  border: 5px solid;
  position: relative;
  display: inline-block;
  background-color: #ffcccc;
}
.dropdown-content {
  border: 5px solid;
  display: none;
  position: absolute;
  background-color: #fff9cc;
  min-width: 100%;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<h2>Hoverable Dropdown</h2>

<div class="dropdown">
  <span> <code> relative; </code> </span>
  <div class="dropdown-content">
    <span> <code> absolute; <code> </span>
  </div>
</div>

在上面的片段中，.dropdown-content 在 .dropdown 下方 不正确 因为 边框大小 正在添加差异。

如果我们去掉 border 。 .dropdown-content 在 .dropdown.

下方右边

如何使用边框并将其显示在彼此的正下方。

如何解决这个 CSS border 错误？

Answer 1

尝试添加 left: -5px 来补偿 5px 边框，如下所示：

.dropdown {
  border: 5px solid red;
  position: relative;
  display: inline-block;
  background-color: #ffcccc;
  box-sizing: border-box;
}
.dropdown-content {
  border: 5px solid;
  display: none;
  position: absolute;
  background-color: #fff9cc;
  min-width: 100%;
  box-sizing: border-box;
  left: -5px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<h2>Hoverable Dropdown</h2>

<div class="dropdown">
  <span> <code> relative; </code> </span>
  <div class="dropdown-content">
    <span> <code> absolute; <code> </span>
  </div>
</div>

Answer 2

添加margin-left:-5px到.dropdown-content

.dropdown {
  border: 5px solid;
  position: relative;
  display: inline-block;
  background-color: #ffcccc;
}
.dropdown-content {
  border: 5px solid;
  display: none;
  position: absolute;
  background-color: #fff9cc;
  min-width: 100%;
  margin-left:-5px;


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

<h2>Hoverable Dropdown</h2>

<div class="dropdown">
  <span> <code> relative; </code> </span>
  <div class="dropdown-content">
    <span> <code> absolute; <code> </span>
  </div>
</div>

Answer 3

margin-left: -5px;

或

left: -5px;

padding 将光标向右移动

Answer 4

如果您使用下面的 link 并使用该代码，它将解决您的问题。这在语义上是很好的方法。

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

Answer 5

您不需要添加负数 margin 在此 way.Here 是 you.Just 的完美解决方案添加 border-top: 5px solid; 并从 .dropdown-content class.Hope 这将 ok.Thanks.

.dropdown {
  border: 5px solid;
  position: relative;
  display: inline-block;
  background-color: #ffcccc;
}
.dropdown-content {
  border-top: 5px solid;
  display: none;
  background-color: #fff9cc;
  min-width: 100%;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<h2>Hoverable Dropdown</h2>

<div class="dropdown">
  <span> <code> relative; </code> </span>
  <div class="dropdown-content">
    <span> <code> absolute; <code> </span>
  </div>
</div>

如何解决 CSS 下拉边框错误？

How to solve CSS dropdown border error?

html

css

user-interface

dropdown