元素的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定位

回答

相关问题