How to move little image inside the menu?
Question
How do I move the little arrow image which is inside <li> ?
Here is the code:
body { margin: 0; padding: 0; } nav { width: 100%; background: #f1f1f1; padding: 5px; } nav ul { list-style-type: none; } nav ul li { display: inline-block; } nav ul li a img { max-width: 20px; height: auto; margin-left: 4px; } nav ul li a { color: #636363; padding: 10px; text-decoration: none; } nav ul li a:hover { color: #333; text-decoration: underline; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css-1.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="javascript-1.js"></script> <title>Haircut</title> </head> <body> <header> <nav> <ul> <li><a href="#">News</a> </li> <li><a href="#">Delivery</a> </li> <li><a href="#">Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a> </li> <li><a href="#">Guaranties</a> </li> <li><a href="#">Contacts</a> </li> </ul> </nav> </header> </body> </html>
If I just add margin-top to the img element it moves all the ul down. That's not what I want. I want to move it a little bit down to align with the li items
2 answers
solution1
3 ACCPTED 2016-03-21 14:21:38
vertical-align: middle; Might be what you need.
body { margin: 0; padding: 0; } nav { width: 100%; background: #f1f1f1; padding: 5px; } nav ul { list-style-type: none; } nav ul li { display: inline-block; } nav ul li a img { max-width: 20px; height: auto; margin-left: 4px; vertical-align: middle; } nav ul li a { color: #636363; padding: 10px; text-decoration: none; } nav ul li a:hover { color: #333; text-decoration: underline; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css-1.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="javascript-1.js"></script> <title>Haircut</title> </head> <body> <header> <nav> <ul> <li><a href="#">News</a> </li> <li><a href="#">Delivery</a> </li> <li><a href="#">Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a> </li> <li><a href="#">Guaranties</a> </li> <li><a href="#">Contacts</a> </li> </ul> </nav> </header> </body> </html>
solution2
0 2016-03-21 14:28:20
You can set the image as position absolute.
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
Then you can position it using the top property, not beautiful but works
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.
Related Question
How to move the image in a div a little to the bottom
How to move an image vertically downwards inside a navigation menu with HTML and CSS
How to move the menu inside the “menu border”
Parallax css background image move a little
How to move image a little bit down without affecting the input box in CSS?
How to move <p> a little bit left with css?
How To Move A DIV Element A Little Towards The Top
How To Move Div Elements A Little To The Left
How to move UL tags inside of a div to form a menu
How to fix the little space in when hovering in menu?
Related Tags