0
我有一個輸入文本，並且在這個輸入文本下面我想要一個帶有一些文本的綠色的div。但我希望這個綠色區域與輸入元素佔據相同的位置，但它不起作用。你知道什麼是不正確的嗎？ul下面的輸入元素不佔用輸入元素的相同寬度
.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/
只需卸下'位置：fixed'你可能不希望反正 - https://jsfiddle.net/k9uL4zon/1/ –
感謝。但我希望這個ul只是在懸停時出現，沒有固定的位置，其他元素隨着懸停彈出search_auto_complete ul時會移動。 – J0nes