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.

http://plnkr.co/edit/se9mdvytq1qnj1zbrxyq?p=preview


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -