Jquery 无法使用图像设计垂直菜单
我正在做我的大学项目,为此我必须在我的项目中添加垂直菜单栏。我在谷歌上搜索了很多,但找不到创建带有图像的垂直菜单的代码。你能告诉我如何创建这种菜单吗 我想创建如下菜单: 我试着这样做,但是文本被放在了底部。我想把它放在中间Jquery 无法使用图像设计垂直菜单,jquery,html,css,menu,Jquery,Html,Css,Menu,我正在做我的大学项目,为此我必须在我的项目中添加垂直菜单栏。我在谷歌上搜索了很多,但找不到创建带有图像的垂直菜单的代码。你能告诉我如何创建这种菜单吗 我想创建如下菜单: 我试着这样做,但是文本被放在了底部。我想把它放在中间 <ul class="menu"> <li> <a href="#"><p><img src="images/sys.png" width="30" height
<ul class="menu">
<li>
<a href="#"><p><img src="images/sys.png" width="30" height="30">Home</p></a>
</li>
</ul>
-
基本思想是,您可以使用display:inline块和vertical align:middle垂直对齐文本和图像
<ul class="nav">
<li class="roadster"><a href="#"><span class="brand">Roadster</span><span class="image"><img src="http://png-3.findicons.com/files/icons/1012/racing_cars/128/mitsubishi_lancer.png" alt=""></span></a></li>
<li class="roadster"><a href="#"><span class="brand">Roadster</span><span class="image"><img src="http://png-3.findicons.com/files/icons/1012/racing_cars/128/mitsubishi_lancer.png" alt=""></span></a></li>
</ul>
你可以使用
:after
伪元素来达到想要的效果。检查
<ul class="menu">
<li><a href="#">Boxter</a></li>
<li><a href="#">Cayman</a></li>
<li><a href="#">911</a></li>
</ul>
<ul class="menu">
<li><a href="#">Boxter</a></li>
<li><a href="#">Cayman</a></li>
<li><a href="#">911</a></li>
</ul>
ul{margin:0; padding:0; list-style-type:none;}
li a
{
display:block;
border-bottom:1px solid grey;
padding:25px 0;
}
li{ position:relative;}
li a:after
{
content:">";
position:absolute;
right:20px;
top:30px;
vertical-align:middle;
}
li:nth-child(1):after
{
content:" ";
position:absolute;
right:50px;
top:0;
background:url("http://lorempixel.com/70/70") 0 20px no-repeat;
width:70px;
height:70px;
vertical-align:middle;
}
li:nth-child(2):after
{
content:" ";
position:absolute;
right:50px;
top:0;
background:url("http://placehold.it/70x70") 5px 20px no-repeat;
width:70px;
height:70px;
vertical-align:middle;
}