Я работаю над своим проектом в колледже, для которого я должен добавить вертикальный бар в моем проекте. Я много искал в Google, но не смог найти код для создания вертикального меню с изображениями. Не могли бы вы рассказать мне, как я могу создать это меню?
Я хочу создать свое меню следующим образом:
Я пытаюсь так, но текст становится помещенным внизу. Я хочу его посередине.
<ul class="menu">
<li>
<a href="#"><p><img src="images/sys.png" width="30" height="30">Home</p></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>
/ --Here является CSS---- */
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;
}
Основная идея заключается в том, что вы можете вертикально выравнивать текст и изображение с помощью дисплея: встроенный блок и вертикальный-выравнивать: средний.
<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>
http://jsfiddle.net/YVp8E/11/
http://jsfiddle.net/YVp8E/11/show
.nav {
width: 25em;
}
.nav li {
display: block;
}
.nav li a {
color: #686868;
display: block;
padding: 10px 0;
}
.nav li {
background: url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/forward-128.png) no-repeat 100% 50%;
}
.nav li {
border-top: 1px solid #ccc;
}
.nav li:first-child {
border-top: none;
}
.nav span {
display: inline-block;
vertical-align: middle;
}
.nav .image {
padding-left: 60px;
}