html - 图标的 CSS 位置

Question

我在定位图标时遇到了一些麻烦，你能帮帮我吗？ [最近的代码]:http://bootply.com/112777 我试图在我的行的左端放置一个功能区图标(我通过使用 li 元素上的 border-top 属性创建了该行) 非常感谢!

<div class="container">
   <div class="row">
     <div class="col-lg-7" id="top-banner">
       <ul>
         <li>
           <p class="sell1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! 
<i class="fa fa-bookmark-o"></i></li>
       </ul>
     </div>
  </div>
</div>

#top-banner li {
    list-style: none;
    border-top: 1px solid black; 
    width: 320px;
}
.sell1 {
    padding-left: 25px;
}

Answer 1

如果您试图让图标位于黑线的左侧，则无法使用 li 标签的上边框。

我在你的 p 标签上添加了一些 html，它将模拟一个旁边有黑线的图标。

DEMO

 <li>   
     <div class="icon_container">
          <div class="icon"></div>
          <div class="line"></div>
     </div>
     <p class="sell1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! 
 </li>

.icon {
    display:inline-block;
    width:20px;
    height:20px;
    border:thin solid black;
}
.line {
    width:280px;
    height:15px;
    vertical-align:middle;
    display:inline-block;
    border-top:thin solid black;
}
#top-banner li {list-style: none; width: 320px; }