对齐两个不同的段落

Question

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

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

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

Answer 1

使用<table>。

对于要成为表的内容，

<table>不是过时的解决方案。因此您的代码如下所示：

<table>
 <tr>
  <td>Email</td
  <td>[email protected]</td>
 </tr>
 <tr>
  <td>Github</td
  <td>https://github.com</td>
 </tr>
 <tr>
  <td>LinkedIn</td
  <td>https://linkedin.com</td>
 </tr>
</table>

和：

/* CSS

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

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

Answer 2

尝试一下：

HTML

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

<div>
  <b>Email:</b> <a href="mailto:[email protected]"   class="contact-  link">[email protected]</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;
}