图标的 CSS 位置答案

【问题标题】：CSS position of icon图标的 CSS 位置
【发布时间】：2021-07-03 20:58:05
【问题描述】：

我在定位图标方面遇到了一些麻烦，你能帮帮我吗？【近期代码】：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;
}

【问题讨论】：

您希望图标放置在哪里？我在您的代码中没有看到任何图标
@tas9 你移除了 CSS 语法高亮。
我添加了功能区图标 - 例如包含在 FontAwesome 中的图标。问题是我不知道如何将其从正常的文档流中取出并将其放置在
项目边框的左端。

【解决方案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; }

【讨论】：

谢谢，这是最接近我想要的效果。还有一件事，你知道如何去除 p 标签和线条之间的像素间隙吗？我试过 margin: 0 但没有运气。因为它是丝带，所以它应该直接位于线条旁边 - 没有间隙。
p 标签默认上下都有边距。尝试将 p 标签上的 margin-top 设置为 0px，这将使其更接近线条。您甚至可以将 margin-top 设置为 -1px 或更多负值以向上拉容器。

【解决方案2】：

您必须像这样编写代码。请把你很棒的图标换成 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>

这是一个DEMO

如果您在段落之后需要它，请像这样。

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

这是一个DEMO

【讨论】：

【解决方案3】：

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

1) 修复了包装 div 顶部角落的容器。

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

http://jsfiddle.net/h67mP/

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

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

http://jsfiddle.net/h67mP/2/

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

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

http://jsfiddle.net/h67mP/3/

【讨论】：

【解决方案4】：

您可能想在<div class="row"> 之后尝试绝对定位新的<div>

此方法使用position: absolute;，它将从其他元素的流中删除该元素。如果这不适合你也可以float 周围的元素，甚至使用display:inline-block;。这完全取决于您的页面设置方式。

新的 html

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

新的 CSS

.new {background-color:red;height:150px;width:25px;position:absolute;}
.row {position:relative;}

示例：http://jsfiddle.net/4L54y/

【讨论】：