0
Ich habe einen Eingabetext und unter diesem Eingabetext möchte ich ein div mit einer grünen Farbe, die etwas Text hat. Aber ich möchte, dass dieser grüne Bereich das Gleiche mit dem Eingabeelement belegt, aber es funktioniert nicht. Weißt du, was nicht stimmt?ul unterhalb des Eingabeelements besetzt nicht die gleiche Breite des Eingabeelements
.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>Beispiel: https://jsfiddle.net/k9uL4zon/
Entfernen Sie einfach die 'Position: fixed', die Sie wahrscheinlich nicht wollen, sowieso - https://jsfiddle.net/k9uL4zon/1/ –
Danke. Aber ich möchte, dass diese ul gerade bei Hover erscheint und ohne die fixierte Position bewegen sich die anderen Elemente, wenn diese search_auto_complete ul mit dem Hover erscheint. – J0nes