I create an online store. The menu needs to be cleaned up. For this, 3 elements are created .leftside, .rightside, .centerplace and .nestedblock. They are used for marking (rightside must be invisible)
<html>
<head>
<style type="text/css">
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
ul {
background: #afafaf;
display: inline-block;
width: 420px;
border-right: 1px solid #000;
}
ul li {
padding: 6px 0;
background: #fff;
display: inline-flex;
}
ul li:hover {
background: lightgreen;
}
ul li a {
color: #000;
}
ul li:hover a,
ul li:hover .fa {
color: #fff;
}
ul li .fa {
margin-left: 16px;
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.leftside {
margin-left: 16px;
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.rightside {
margin-right: 16px;
display: none;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.centerplace {
width: 328px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.nestedblock {
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Техника для кухни</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<i class="fa fa-star"></i>
<a href="">Бытовая техника для дома</a>
</li>
<li>
<i class="fa fa-youtube"></i>
<a href="">Техника для прихожей и гостинной</a>
</li>
<li>
<i class="fa fa-facebook"></i>
<a href="">Телевизоры и аудиотехника</a>
</li>
</ul>
</body>
</html>How can I get the icon to be on the side and the hyperlink centered using flex? (the second icon from the right is made invisible, and the picture and inscription are in the desired positions)
Aucun commentaire:
Enregistrer un commentaire