使用時出現額外空間：選擇器前

Question

我不是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>

Answer 1

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

Answer 2

這被定位爲內容的左側。 它看起來像你以前的目標是錯誤的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>