Question

需要帮助才能在追踪的左侧显示文本框。这应该是它的样子。

＆＃13;

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

＆＃13;

<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>
</div>

＆＃13;

Answer 1

很简单，使用display: flex作为dropcontent

检查更新后的代码段

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<html>


<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>


</div>

</html>

Answer 2

将以下内容添加到.dropdown-content：

top: 0;
right: calc( 100% + 5px );

注意当您将一个元素悬停在另一个元素上时，您必须小心放置。如果父元素和子元素之间存在间隙，则您将不再悬停父元素，并且子元素将消失。要解决此问题，您需要两个元素相互接触。您可以通过确保它们触摸（彼此相邻或在另一个上重叠），添加填充（如果使用背景颜色可能不理想）或使用伪元素来执行此操作。我做了后者，所以我添加了这个选择器：

.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

此解决方案会执行您在图片中显示的内容，但我不确定您希望（将要）处理.dropdown左侧的空间。我缩小了body的宽度，这样你就可以看到它飞出来了。

＆＃13;

body {
  width: 40%;
  margin: 25px auto;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* Fills gap between Track and flyout so it will continue to show when moving mouse. */
.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  right: calc( 100% + 5px );
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

＆＃13;

<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>
</div>

＆＃13;

将对话框中的文本框对齐左侧css

2 个答案: