使用时出现额外空间：选择器前
我不是CSS专家。我有一个DRUPAL网站，使用基于bootstrap的主题。为了在主页上显示重要信息，我使用引导警报框。它运行良好，除了在选择器之前添加一些内容时获得额外的空间。我创建了一个fiddle使用时出现额外空间：选择器前
有没有简单的方法来解决这个额外的空间？我通过将行高设置为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 {
\t 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>
回答：
添加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
回答：
这被定位为内容的左侧。 它看起来像你以前的目标是错误的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 {
\t padding-bottom:1.2em;
}*/
#top-content .block .views-row .views-field{
\t 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>
以上是 使用时出现额外空间：选择器前 的全部内容， 来源链接： utcz.com/qa/265352.html
