输入元素下面的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替换为width: 100%，用于您的元素.search_auto_complete 。演示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;