所以基本上我有一个我正在做的小元素。这就是问题所在。对于每个帖子,图标都会从右侧移得更远并向左移动。我试过 float: right
和 margin-right: 10px
,但似乎从来没有更靠右。这是我所看到的图片。
如您所见,心形图标和评论图标几乎形成了类似楼梯的效果。这是我正在使用的代码。
我的标记:
<div class="header"></div>
<div class="wrapper">
<div class="content">
<div class="post">
<div class="icons">
<i class="fa fa-heart"></i>
<i class="fa fa-comment"></i>
</div>
<h1 class="message">@alex likes cats</h1>
</div>
<div class="post">
<div class="icons">
<i class="fa fa-heart"></i>
<i class="fa fa-comment"></i>
</div>
<h1 class="message">@alex likes cats</h1>
</div>
<div class="post">
<div class="icons">
<i class="fa fa-heart"></i>
<i class="fa fa-comment"></i>
</div>
<h1 class="message">@alex likes cats</h1>
</div>
</div>
</div>
</body>
</html>
还有我的 CSS
.message{
font-family: 'Avenir Next';
font-weight: 400;
padding-left: 35px;
line-height: 70px;
}
.post{
width: 100%;
height: 100px;
border-bottom: 1px solid #ccc;
}
.fa-heart{
transition: 0.5s;
line-height: 155px;
color: #000;
font-size: 24px;
float: right;
margin-right: 30px;
cursor: pointer;
}
.fa-heart:hover{
transition: 0.5s;
line-height: 155px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 30px;
cursor: pointer;
}
.fa-comment{
transition: 0.5s;
line-height: 155px;
color: #000;
font-size: 24px;
float: right;
margin-right: 18px;
cursor: pointer;
}
.fa-comment:hover{
transition: 0.5s;
line-height: 155px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 18px;
cursor: pointer;
}
.icons{
float: right;
margin-right: 0px;
}
加 here's一个演示。我不太确定出了什么问题。所以任何帮助都会很棒。
最佳答案
删除 line-height 和 float:right 用于 .fa-heart、.fa-comment 及其悬停对应项。 http://jsbin.com/wogonefi/6
另一种选择:
.post{
width: 100%;
height: 155px;
border-bottom: 1px solid #ccc;
}
高度已被修改以适应图标的行高。
关于html - 每 "post",图标更靠左,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24522034/