使用时出现额外空间：选择器前

时间：2015-10-13 12:33:17

标签： css

我不是CSS专家。我有一个DRUPAL站点，使用基于bootstrap的主题。我使用bootstrap警告框以在主页上显示重要消息。它运行良好，除了在选择器之前添加一些内容时我获得额外的空间。我创建了一个fiddle

有没有一种简单的方法来解决这个额外的空间？我通过将line-height设置为0到警报的祖先来解决了这个问题，但是当缩小页面时，文本不会转到新行并与其自身叠加。 谢谢你的帮助。

以下是代码：

#top-content .block .views-row::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #f37021;
  content: "\e101";
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-size: 2em;
  font-style: normal;
  font-weight: 400;
  left: 0.35em;
  /*line-height: 1;*/
  position: relative;
  top: 0.3em;
}
/*#top-content .block .views-row {
	padding-bottom:1.2em;
}*/

#top-content .block .views-row .views-field {
  margin-left: 3em;
}
#top-content .block a {
  color: #f37021;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="top-content">
  <div class="container clearfix">
    <div class="clearfix" id="top-content-inside">
      <div class="region region-highlighted">
        <div class="block block-views contextual-links-region clearfix" id="block-views-alerts-block-1">

          <div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a>
            <ul class="contextual-links">
              <li class="views-ui-edit first"><a href="/en/admin/structure/views/view/alerts/edit/block_1?destination=node/385">Edit view</a>
              </li>
              <li class="block-configure last"><a href="/en/admin/structure/block/manage/views/alerts-block_1/configure?destination=node/385">Configure</a>
              </li>
            </ul>
          </div>
          <div class="content">
            <div class="view view-alerts view-id-alerts view-display-id-block_1 view-dom-id-281661d0f4b7c5128ce6ef7abc38dfb1">
              <div class="view-content">
                <div class="views-row views-row-1 views-row-odd views-row-first alert alert-info fade in">
                  <div class="views-field views-field-nothing"> <span class="field-content"><a aria-label="close" data-dismiss="alert" class="close" href="#">×</a></span> 
                  </div>
                  <div class="views-field views-field-title"> <span class="field-content"><a href="/nl/content/wiv-isp-closed-between-1st-and-5th-november">WIV-ISP closed between 1st and 5th of November</a></span> 
                  </div>
                </div>
                <div class="views-row views-row-2 views-row-even views-row-last alert alert-info fade in">
                  <div class="views-field views-field-nothing"> <span class="field-content"><a aria-label="close" data-dismiss="alert" class="close" href="#">×</a></span> 
                  </div>
                  <div class="views-field views-field-title"> <span class="field-content"><a href="/nl/content/treinramp-wetteren">Treinramp in Wetteren</a></span> 
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：2)

添加float:left并移除top:0.3em 

#top-content .block .views-row::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #f37021;
    content: "\e101";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    left: 0.35em;
    line-height: 1; //uncommented this
    float:left; //added this
    position: relative;
    /*top:0.3em*/ //removed this

}

Demo Here

答案 1 :(得分：0)

此处它位于您内容的左侧。 看起来你用你之前的目标定位了错误的div。我还添加了一个左侧给它一点空间。看下面的结果

更改目标div：

#top-content .block .views-row::before

为：

.views-field-title .field-content:before

将左侧更新为：

left: -10px;

结果如下：

.views-field-title .field-content:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #f37021;
    content: "\e101";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    /*line-height: 1;*/
    position: relative;
    top: 0.3em;
left:-10px;
}
/*#top-content .block .views-row {
	padding-bottom:1.2em;
}*/
#top-content .block .views-row .views-field{
	margin-left: 3em;
}
#top-content .block a {
    color: #f37021;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="top-content">
        <div class="container clearfix">

            
                            <div class="clearfix" id="top-content-inside">
                      <div class="region region-highlighted">
    <div class="block block-views contextual-links-region clearfix" id="block-views-alerts-block-1">

    <div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a><ul class="contextual-links"><li class="views-ui-edit first"><a href="/en/admin/structure/views/view/alerts/edit/block_1?destination=node/385">Edit view</a></li>
<li class="block-configure last"><a href="/en/admin/structure/block/manage/views/alerts-block_1/configure?destination=node/385">Configure</a></li>
</ul></div>
  <div class="content">
    <div class="view view-alerts view-id-alerts view-display-id-block_1 view-dom-id-281661d0f4b7c5128ce6ef7abc38dfb1">
        
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first alert alert-info fade in">
      
  <div class="views-field views-field-nothing">        <span class="field-content"><a aria-label="close" data-dismiss="alert" class="close" href="#">×</a></span>  </div>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/nl/content/wiv-isp-closed-between-1st-and-5th-november">WIV-ISP closed between 1st and 5th of November</a></span>  </div>  </div>
  <div class="views-row views-row-2 views-row-even views-row-last alert alert-info fade in">
      
  <div class="views-field views-field-nothing">        <span class="field-content"><a aria-label="close" data-dismiss="alert" class="close" href="#">×</a></span>  </div>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/nl/content/treinramp-wetteren">Treinramp in Wetteren</a></span>  </div>  </div>
    </div>
  
  
  
  
  
  
</div>  </div>
</div>
  </div>
                </div>
            
        </div>
    </div>

相关问题
最新问题