Question

我在定位图标方面遇到了一些麻烦，请你帮忙吗？我想在我的行的左端放置一个带状图标（我通过在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

我只是在做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/

Answer 2

您可能希望在<div>

之后尝试绝对定位新的<div class="row">

此方法使用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/

Answer 3

你必须像这样编写代码。请将您的精彩图标交换到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

Answer 4

如果您尝试将图标放在黑线的左侧，则无法使用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; }

CSS图标的位置

4 个答案: