图像大小和位置

Question

I added an image on my navigation bar but this image position is not set. So I try to set through margin. When I add margin-right:20px then "events" title goes to the right side but I want to set position of image right side.

Image what I try:

image 1 http://oi65.tinypic.com/jtqequ.jpg

Image what I want:

image 2 http://oi64.tinypic.com/33xc96v.jpg

 .lefttabs{ background-color:#1E1E1E; color:White; font-family:Calibri; font-weight:bold; font-size:medium; width: 187px; height: 100%; z-index:1;/* Stay on top */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } .lefttabs a { text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; font-size:medium; color:White; width: 133px; margin-left: 0px; } .lefttabs ul{ list-style:none; margin:0px 20px 0px 0px; border:1 px solid; border-color:Black; } .lefttabs li{ list-style:none; } .lefttabs li a { list-style:none; display:block; padding: 0px 0px 30px 0px; padding-left: 10px; padding-top: 10px; } .lefttabs a:hover,.offcanvas a:focus{ color: green; background-color:White; border-bottom-color:Red; color:#000!important; border:1px solid; } .imga{ margin-right:20px; } 

 <div class="lefttabs"> <ul> <li> <a href=""> <img class="imga" alt="" src="images/eve.bmp" border="0" />EVENTS</a> </li> </ul> </div> 

Answer 1

Without going trough all your CSS, this are the basics:

 .lefttabs{ background:#444; } .lefttabs ul{ list-style: none; margin:0; padding: 0; } .lefttabs a{ display: block; padding: 8px; text-decoration: none; color:#fff; line-height: 24px; /* 24px are icons so use same line height */ } .lefttabs a img{ margin:0 8px 0 0; vertical-align: top; /* needed */ } 

 <div class="lefttabs"> <ul> <li> <a href="#"><img class="imga" alt="icon" src="//placehold.it/24x24"/>EVENTS</a> </li> <li> <a href="#"><img class="imga" alt="icon" src="//placehold.it/24x24/f0f"/>STUFF</a> </li> </ul> </div> 

Answer 2

Here is fiddle with very small change : https://jsfiddle.net/9ns31Lu6/1

I've just added vertical-align: middle; to your .imga class.

And here is another https://jsfiddle.net/9ns31Lu6/3/ to match with somewhat your image.

And here https://jsfiddle.net/9ns31Lu6/4/ it's for multiple menu items.