Question

我试图让我的底部边框和我的箭头填满父级div并排在右边。我希望它们在所有视图中看起来都像这样，而不仅仅是它的移动时间。

我相信这个问题不会100％，但我似乎无法弄明白。

这是我创建的JS小提琴：https://jsfiddle.net/e9uv08wh/2/

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS：

Answer 1

尝试阻止display:table-cell 将代码从表迁移到div时，它更像是一个工作量。

使用line-height垂直对齐文字可以很好地完成工作。

我做了什么：

删除了带有显示块的显示表格单元格
提供a行高
给出了图标行高

当文字比单元格长时，你仍然需要处理响应问题。

结果：

＆＃13;

    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;
     }

＆＃13;

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

＆＃13;

Answer 2

我建议使用语义标记，并使用flexbox来简化。当文本换行时，它也可以正常工作，图标保持垂直居中。

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

Answer 3

如果你想让它看起来像上面那样，你可以给宽度设一个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>

如何在链接列表中将字体真棒图标对齐？

3 个答案: