css - Inline styling failing to work with side menu -
i'm not quite sure why cannot seem menu go horizontal instead of vertical. i've followed lot of community posts, using combinations of floats , inline-blocks etc , seems may missing something.
here code;
<div class="sidebar-left"> <div class="sidebar-links"> <a href="#"><i class="fa fa-tachometer"></i>1</a> <a href="#"><i class="fa fa-tachometer"></i>2</a> <a href="#"><i class="fa fa-tachometer"></i>3</a> <a href="#"><i class="fa fa-tachometer"></i>4</a> </div> </div>
.sidebar-left { width: 15vw; height: 0; position: fixed; background-color: black; } .sidebar-left .sidebar-links { margin: 20px auto; } .sidebar-links div { display: inline-block; } .sidebar-left .sidebar-links > { display: block; text-decoration: none; padding: 20px 0; background-color: black; text-align: center; color: #b3bcc5; font-size: 0.75rem; font-weight: bold; } .sidebar-links i.fa { display: block; font-size: 35px; margin-bottom: 5px; }
http://plnkr.co/edit/g8g4be3mwwl68ahglf6u?p=preview
this has been frustrating thought simple do, has turned out little tricky.
i'm hoping can point out have gone wrong!
thanks
(just confirm : aim make menu horizontal, , not vertical).
just use display: inline-block
on a
elements instead of display: block
. display: block
causes element take entire width of parent hence making them stack vertically. display: inline-block
makes elements wide content , stacks them horizontally.
Comments
Post a Comment