查找并删除html元素之间的空格

时间:2016-08-07 19:35:07

标签: html css

我正在尝试删除html页面中2个元素之间的空格。 我设置margin-left:0px;但它不起作用。

以下是代码:

<div class="row">
                    <div class="col-lg-6 col-md-6 col-xs-6 thumb">    
                        <div class="thumbnail" href="#">
                            <img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
                        </div>
                    </div>    
                    <div class="col-lg-6 col-md-6 col-xs-6 thumb">


                        <ul class="bullet-remover">
                            <li class="item">
                                <div class="media">

                                  <div class="media-body">
                                    <h3 class="media-heading"><strong>Luisa Martine</strong></h3>

                                            

                                  </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

如您所见,imageul标记之间有一个空格。 我试图用以下方法删除左边距:

.bullet-remover{

    list-style-type: none;
    margin-left: 0px;
}

但它不起作用?

1 个答案:

答案 0 :(得分:0)

我可以看到你的子弹有一些自定义填充。因此,一个选项是取消“.thumb”的填充左侧和填充右侧

还有一个问题。请不要在“.row”周围留下“.container”。这两个是完美的&amp;相互制造。

  • 容器添加了左侧和右侧填充,这些填充将被行取消,因此页面中不会有任何滚动条

选项2:

如果您对柱沟空间没问题, 然后你的子弹卸妆应如下

.bullet-remover{
  padding:0;
  margin:0;
  list-style:none;
}

检查代码段

.thumb {
  /*padding-left: 0 !important;
  padding-right: 0 !important;*/
}
.bullet-remover
{
  list-style:none;
  padding:0;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6 thumb">
      <div class="thumbnail" href="#">
        <img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6 thumb">
      <ul class="bullet-remover">
        <li class="item">
          <div class="media">

            <div class="media-body">
              <h3 class="media-heading"><strong>Luisa Martine</strong></h3>
              

            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>