Question

我有两列要对齐的文本。现在，我正在考虑一种非常混乱的方法，仅使用&nbsp，但我知道这不是正确的方法。我希望文本保持对齐，而链接彼此的第一个字母对齐。我提供的这支笔有一个使用空格的示例。

我已经考虑过使用<table>来完成此操作，但是我觉得这种方法已经过时了，必须有一个更好的解决方案。我也考虑过使用Flexbox，但不确定如何使用Flexbox达到想要的效果。

https://codepen.io/developerryan/pen/ZEEGzGL

Answer 1

您当然可以使用<table>。

<table>对于要成为表格的事物来说不是过时的解决方案。因此您的代码如下所示：

td:first-child {
  font-weight: 700;
}

<table>
  <tr>
    <td>Email</td>
    <td>contact@email.com</td>
  </tr>
  <tr>
    <td>Github</td>
    <td>https://github.com</td>
  </tr>
  <tr>
    <td>LinkedIn</td>
    <td>https://linkedin.com</td>
  </tr>
</table>

将每行的第一个元素加粗。

Answer 2

尝试一下：

HTML

<div class="contact-text contact-info">

<div>
  <b>Email:</b> <a href="mailto:contact@developerryan.com"   class="contact-  link">contact@email.com</a>
</div>

<br>
<div>
<b>GitHub:</b> <a href="https://github.com/developerryan" class="contact-link">https://github.com</a>
</div>
<br>

<div>
<b>LinkedIn:</b> 
  <a href="https://linkedin.com/in/ryanelliott99" class="contact-link">https://linkedin.com</a>
</div>

</div>

CSS

.contact-info div {
  display: flex;
}

.contact-info div a { 
  flex: 1 1 100%;
}

.contact-info div b { 
  flex: 1 1 100px;
}

a {
  text-decoration: none;
  display: inline;
}

对齐两个不同的段落

2 个答案: