元素的CSS定位

如何減少元素之間的空間。當屏幕尺寸縮小時，它不應該中斷，即應該有響應。元素的CSS定位

以下是堆棧片段。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a> 
 
<h3 class="total_votes"> 1 </h3> 
 
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

然而，我試着用position, top, and bottom CSS屬性玩，但不可能得到想要的結果。另外，我嘗試通過CSS去除h3元素的默認邊距和填充，但這樣做效果很小。我怎樣才能減少空餘空間。此外，我不想刪除fa-3x類。我想要1和down-arrow向上移動。請幫助。

來源

2016-08-22 PythonEnthusiast

嘿，你可以在「發FA-排序倒序FA-3X」這個類改變。那麼它就會受到影響。 verticle-align和line-height屬性的變化並檢查它。 –

向上箭頭只使用字符單元格的上半部分。也就是說，白色空間實際上是在角色內部。 –

@ KiranKhatri-感謝您的參與。減少線高度向下移動向下箭頭。現在我該如何移動'1'？ – PythonEnthusiast

通過給固定高度試試這個

h3{ 
 
    margin-top:-3%; 
 
    margin-bottom:-3%; 
 
    padding-left: 2%; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a> 
 
<h3 class="total_votes"> 1 </h3> 
 
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

來源

2016-08-22 05:07:37 Abhishek

隱藏額外的空間

.vote-up, .vote-down{ 
 
\t display: inline-block; 
 
\t height: 20px; 
 
\t overflow: hidden; 
 
} 
 
.vote-down .fa-sort-desc{ 
 
\t position: relative; 
 
\t top: -25px; 
 
} 
 
h3.total_votes{ 
 
\t margin: 10px 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a> 
 
<h3 class="total_votes"> 1 </h3> 
 
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

來源

2016-08-22 05:18:58

減少margin-top和margin-bottom的total_votes元素。

.vote { 
 
    width: 40px; 
 
    text-align: center; 
 
} 
 

 
.total_votes { 
 
    margin: -1em 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="vote"> 
 
    <a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a> 
 
    <h3 class="total_votes">1</h3> 
 
    <a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a> 
 
</div>

來源

2016-08-22 06:47:53 Nhan

元素的CSS定位

回答

相關問題