如何在链接列表中将字体真棒图标对齐？
[英]How to align font awesome icon to the right in a list of links?
问题描述
I am trying to get my bottom borders and my arrows to all fill the parent div and be lined up on the right. 
我试图让我的底部边框和我的箭头填满父级div并排在右边。 I want them to look like this in all views not just when it's mobile. 我希望它们在所有视图中看起来都像这样，而不仅仅是在移动时。
I believe there's an issue with the div not going 100% but I just cannot seem to figure it out. 我认为div有问题不是100％，但我似乎无法弄明白。
Here is the JS Fiddle I created: https://jsfiddle.net/e9uv08wh/2/ 这是我创建的JS小提琴： https ： //jsfiddle.net/e9uv08wh/2/
a { color: #544f47; height: 3.4em; display: block; display: table-cell; vertical-align: middle; width: 25%; font-weight: normal; padding-left: 1em; border-bottom: .0625em solid #544f47; } i.fa.fa-chevron-right { float: right; margin-right: .5em; padding-top: .3em; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span> <span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
CSS: CSS：
3 个解决方案
解决方案1
2 已采纳 2018-02-08 20:18:49
try to prevent display:table-cell . 试图阻止display:table-cell 。
It's more a workarount when you migrate code from a table to div. 将代码从表迁移到div时，它更像是一个工作量。
Using line-height to vertical align your text does the job verry well. 使用line-height来垂直对齐文本可以很好地完成工作。
What i've done: 我做了什么：
- removed display table-cell with display block 删除了带显示块的显示表单元格
- gave
aline height给出a线高 - gave icon line height 给了图标线高度
you still have to deal with responsive problems when your text is longer than your cell. 当文本比单元格长时，你仍然需要处理响应问题。
Result: 结果：
a { color: #544f47; height: 3.4em; width: 30%; font-weight: normal; padding-left: 1em; border-bottom: .0625em solid #544f47; line-height: 3.4em; display: block; } i.fa.fa-chevron-right { float: right; margin-right: .5em; padding-top: .3em; line-height:3em; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span> <span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
解决方案2
1 2018-02-08 21:00:49
I suggest to use semantic markup, and use flexbox for simplicity. 我建议使用语义标记，并使用flexbox来简化。 It also works good when the text wraps, and the icon remains vertically centered. 当文本换行时，它也可以正常工作，并且图标保持垂直居中。
.list { padding-left: 0; width: 30%; } .list li { list-style: none; } .list a { display: flex; justify-content: space-between; align-items: center; padding: 10px; text-decoration: none; border-bottom: 1px solid; color: black; } .list a:after { display: inline-block; padding-left: 10px; font-family: FontAwesome; content: "\\f054"; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <ul class="list"> <li><a href="#">Link text example</a></li> <li><a href="#">The quick brown fox jumps over the lazy dog</a></li> </ul>
解决方案3
0 2018-02-08 20:14:04
If you want to make it look like above, you can just give the width a set px, like so: 如果你想让它看起来像上面那样，你可以给宽度设置一个px，如下所示：
a{ color: #544f47; height: 3.4em; display: block; vertical-align: middle; width: 40%; font-weight: normal; padding-left: 1em; border-bottom: .0625em solid #544f47; } i.fa.fa-chevron-right { float: right; margin-right: .5em; padding-top: .3em; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span> <span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> <span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span> <span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.