Question

我在导航栏上添加了一个图像，但未设置此图像位置。所以我试着设定保证金。当我添加margin-right:20px时，“事件”标题会转到右侧，但我想设置右侧图像的位置。

想象一下我的尝试：

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

想象我想要的东西：

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

不要使用所有CSS，这是基础知识：

.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

这里有一个非常小的变化：https://jsfiddle.net/9ns31Lu6/1

我刚刚将vertical-align: middle;添加到您的.imga课程中。

这是另一个https://jsfiddle.net/9ns31Lu6/3/与你的形象相匹配。

此处https://jsfiddle.net/9ns31Lu6/4/适用于多个菜单项。

图像大小和位置

2 个答案: