Html 图标的位置

我在定位图标方面有点困难，你能帮我吗？ 我正在尝试将功能区图标放置在线条的左端（我使用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>

---

我只是在猜测工作，但是假设您想在第一个缩进列表项之前添加图标，您可以根据您的要求使用以下任一选项：

1）在包装袋的上角固定了一个容器

#top-banner{    
  position:relative;
}
#top-banner:after{
    content:"";
    position:absolute;
    top:25px;
    left:35px;
    background:#b00;
    height:20px;
    width:20px;
}

2）只需将列表项的背景设置为左上角并使用填充

.sell1 {
    background:url('Image.png') no-repeat 0 0;
    padding-left: 40px;
}

3）将所有列表项设置为背景图标

.col-lg-7 li{
  background:url('Image.png') no-repeat 0 20px;
  padding-left: 40px;
}

---

您可能想尝试在

之后绝对定位一个新的

此方法使用

位置：绝对将从其他元素流中删除该元素。如果这不合适，您也可以
浮动
周围的元素，甚至使用
显示：内联块。这完全取决于页面设置的方式

新建html

<div class="row"><div class="new"></div>

示例：
您必须这样编写代码。请将您的真棒图标换成P标签，使其位于行的左侧

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




Lorem ipsum door sit amet，奉献精英。
Ab name amet enim aliquid veritatis eum


这里有一个

如果你在你的段落后需要它，就这样写吧

<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> 
           <p>Ab nam amet enim aliquid veritatis eum!</p>
           <i class="fa fa-bookmark-o"></i>
          </li>
       </ul>
     </div>
  </div>




Lorem ipsum door sit amet，concetetur adipising elit.
Ab nam amet enim aliquid veritatis eum




这里有一个如果您试图让图标位于黑线的左侧，您将无法使用li标记的上边框执行此操作

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



Lorem ipsum door sit amet，奉献精英。
Ab name amet enim aliquid veritatis eum！

.图标{
显示：内联块；
宽度：20px；
高度：20px；
边框：薄而实的黑色；
}
.线路{
宽度：280px；
高度：15px；
垂直对齐：中间对齐；
显示：内联块；
边框顶部：薄而实的黑色；
}
#顶部横幅li{列表样式：无；宽度：320px；}
您希望将图标放置在何处？我在你的电脑里没有看到任何图标code@tas9您删除了CSS语法突出显示。我添加了功能区图标-例如，Fontsome中包含的图标。问题是，我不知道如何将其从正常文档流中取出，并将其放置在
项目边框的左端。谢谢，这是最接近我想要的效果。还有一件事，你知道如何消除p标签和线条之间的像素间隙吗？我尝试了边距：0，但没有运气。因为它是功能区，所以它应该直接位于线条旁边-没有间隙。默认情况下，p标记的顶部和底部都有边距。尝试将p标签上的页边距顶部设置为0px，这将使其更接近线条。您甚至可以将边距顶部设置为-1px或更负，以向上拉动容器。
<div class="container">
   <div class="row">
     <div class="col-lg-7" id="top-banner">
       <ul>
         <li>
           <p class="sell1"><i class="fa fa-bookmark-o"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! </li>
       </ul>
     </div>
  </div>
</div>

<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> 
           <p>Ab nam amet enim aliquid veritatis eum!</p>
           <i class="fa fa-bookmark-o"></i>
          </li>
       </ul>
     </div>
  </div>

 <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; }