css - 输入元素下方的 ul 与输入元素的宽度不同

Question

我有一个输入文本，在此输入文本下方，我想要一个带有一些文本的绿色 div。但我希望这个绿色区域与输入元素占据相同的位置，但它不起作用。你知道什么是不正确的吗？

.main-search {
  width: 100%;
  position: relative;
  background-color: yellow;
}

.search {
  margin: 20px auto;
  width: 100%;
  font-size: 0.85em;
  float: left;
  background-color: white;
  padding: 50px;
  border-radius: 4px;
}

.search_auto_complete {
  background-color: green;
  text-align: left;
  color: gray;
  font-size: 1.1em;
  border: 1px solid black;
  z-index: 10;
  position: fixed;
  width: inherit;
  padding: 0 !important;
}

.search_auto_complete li {
  padding: 10px;
  background-color: $color-white;
  border-bottom: 1px solid $color-gray;
}

.auto_complete_category {
  background-color: $color-light-plus !important;
  color: $color-gray-plus-plus;
  font-weight: bold;
}

.auto_complete_category:hover {
  background-color: $color-light-plus !important;
  cursor: auto !important;
  color: $color-gray-plus-plus !important;
}

.events_auto_complete li:hover {
  background-color: $color-primary;
  cursor: pointer;
  color: $color-white;
}

.search_events_box button {
  border-left: none;
  color: #fff;
  font-weight: 700;
  padding: 17px;
}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
}

input {
  padding-left: 40px !important;
}

input {
  padding: 15px;
  width: 100%;
}

.content {
  float: left;
  width: 100%;
}

.div {
  width: 60%;
  margin: 0 auto;
  padding: 20px 0;
}

<section class="content main-search">
  <div class="div">
    <h1>Title</h1>
    <div class="search">
      <div class="input_search">
        <input id="auto" value="category" type="text">

        <ul class="search_auto_complete">
          <li class="auto_complete_category">Categories</li>
          <li>Category 1</li>
        </ul>

      </div>
    </div>
  </div>
</section>

示例:https://jsfiddle.net/k9uL4zon/

Answer 1

将 position: relative 添加到您的容器 .input_search 并将 position: fixed 替换为 position: absolute 和width: inherit 为您的元素 .search_auto_complete 使用 width: 100%。演示:

.input_search {
  position: relative; /* new */
}

.main-search {
  width: 100%;
  position: relative;
  background-color: yellow;
}

.search {
  margin: 20px auto;
  width: 100%;
  font-size: 0.85em;
  float: left;
  background-color: white;
  padding: 50px;
  border-radius: 4px;
}

.search_auto_complete {
  background-color: green;
  text-align: left;
  color: gray;
  font-size: 1.1em;
  border: 1px solid black;
  z-index: 10;
  position: absolute;
  width: 100%;
  padding: 0 !important;
}

.search_auto_complete li {
  padding: 10px;
  background-color: $color-white;
  border-bottom: 1px solid $color-gray;
}

.auto_complete_category {
  background-color: $color-light-plus !important;
  color: $color-gray-plus-plus;
  font-weight: bold;
}

.auto_complete_category:hover {
  background-color: $color-light-plus !important;
  cursor: auto !important;
  color: $color-gray-plus-plus !important;
}

.events_auto_complete li:hover {
  background-color: $color-primary;
  cursor: pointer;
  color: $color-white;
}

.search_events_box button {
  border-left: none;
  color: #fff;
  font-weight: 700;
  padding: 17px;
}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
}

input {
  padding-left: 40px !important;
}

input {
  padding: 15px;
  width: 100%;
}

.content {
  float: left;
  width: 100%;
}

.div {
  width: 60%;
  margin: 0 auto;
  padding: 20px 0;
}

<section class="content main-search">
  <div class="div">
    <h1>Title</h1>
    <div class="search">
      <div class="input_search">
        <input id="auto" value="category" type="text">

        <ul class="search_auto_complete">
          <li class="auto_complete_category">Categories</li>
          <li>Category 1</li>
        </ul>

      </div>
    </div>
  </div>
</section>