html - 对齐两个不同的段落

标签 html css alignment

<分区>


关闭 3 年前

我有两列文本要对齐。现在我正在考虑一个非常困惑的方法来做这件事并且只使用 &nbsp但我知道这不是正确的方法。我希望文本左对齐,而链接与彼此的第一个字母对齐。我提供的这支笔有一个使用空格的例子。

我考虑过使用 <table>要做到这一点,但我觉得这种方法已经过时了,必须有更好的解决方案。 我也考虑过使用 Flexbox,但我不确定如何使用 Flexbox 实现我想要的效果。

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

最佳答案

你当然可以使用 <table> .

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

将每行的第一个元素设为粗体。

关于html - 对齐两个不同的段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58290729/

上一篇:javascript - 如何使阵列中的随机图像响应?

下一篇:javascript - 向下滚动时,粘性标题过渡变得跳跃和丑陋

相关文章:

javascript - Google map api 和地理定位、Javascript 和 Html

html - Seo:使用 iframe 提高代码文本比?

css - 对齐和堆叠 div

css - 以 Angular 设置第 n 个 child w.r.t 主机上下文

html - 将图像在 div 中右对齐

html - 水平和垂直居中的响应图像

尝试呈现列时出现 html 问题

javascript - 传单 map 未出现在 Rmarkdown 的选项卡式 HTML 文档输出中

jquery - Fotorama透明背景

javascript - Bootstrap 5 多个轮播的轮播指示器