I am lost and confusing div
, li
and ul
. I can't vertically align the word EN in the middle of the form input.
Here is the demo: https://jsfiddle.net/z9qjcv2k/
I tried with height
and line-height
which should have the same height and I can't get it to work.
Thanks all.
HTML:
<div class='line'>
<div class='content_line'>
<ul class='alignes'>
<li>
<div class='menu'>
<ul class='menu'>
<li class='menu'><a href='index.php?langue=en'>EN</a></li>
</ul>
</div>
</li>
<li><input type=text name=mots size=50 placeholder='Search...'></li>
</ul>
</div>
CSS:
*{
margin:0;
}
.line{
height:100px;
background-color:#1b1b1b;
text-align:center;
border-top:1px solid #444444;
border-bottom:1px solid #444444;
padding-left:5%;
}
.alignes ul{
list-style-type:none;
}
.alignes li{
display: inline;
height: 233px;
line-height: 233px;
color:#aaa8a9;
position:relative;
top:20px;
height: 233px;
line-height: 233:px;
}
.content_line{
padding-left:15%;
}
.menu{
display:inline important!;
float:left;
}
.menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
.menu li {
float:left;
margin:auto;
padding:0;
line-height:10px;
height:10px;
}
.menu li a {
display:block;
width:100px;
color:red;
line-height:233px;
height:233px;
text-decoration:none;
padding:5px;
}
.menu li a:hover {
color:#FFD700;
}
.menu ul li ul {
display:none;
}
.menu ul li:hover ul {
display:block;
}
.menu li:hover ul li {
float:none;
}
.menu li ul {
position:absolute;
}
redefine .menu class float
.menu {
.....
float: none;
}
and set a proper padding to .menu li a
.menu li a {
padding 2px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.