如何在菜单中移动小图像?
How to move little image inside the menu?
如何移动<li>
里面的小箭头图片?
代码如下:
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>
如果我只是将 margin-top 添加到 img 元素,它会将所有 ul
向下移动。那不是我想要的。我想将其向下移动一点以与 li
项
对齐
vertical-align: middle;
可能就是您所需要的。
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>
您可以将图片设置为绝对位置。
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
然后你可以使用顶部定位它属性,虽然不漂亮但很有效
如何移动<li>
里面的小箭头图片?
代码如下:
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>
如果我只是将 margin-top 添加到 img 元素,它会将所有 ul
向下移动。那不是我想要的。我想将其向下移动一点以与 li
项
vertical-align: middle;
可能就是您所需要的。
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>
您可以将图片设置为绝对位置。
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
然后你可以使用顶部定位它属性,虽然不漂亮但很有效