HTML/CSS 行距

Posted 2023-03-06

【中文标题】HTML/CSS 行距

【英文标题】：HTML/CSS Line Spacing

【发布时间】：2022-01-18 07:46:12

【问题描述】：

我有以下两个我正在处理的网站的代码摘录。我正在尝试对线条进行更改，但我正在努力做到这一点。这个想法是有以下几点：

“javascript”

4 年以上

“html”

3 年以上

等等，但没有在年份和编程语言之间添加行距，换句话说，每种编程语言之间只有行距。我曾想过使用 pre 标签，但这只会让情况变得更糟。

编辑：请尝试提供不需要 20 个列 div/包装器的解决方案，否则会弄乱列的位置。谢谢！

HTML：

<div class="column" id="column1">
      <h2>Programming Languages</h2>
      Java 4+ yrs <br>
      SQL - 2+ yrs <br>
      JavaScript - 2 yrs <br>
      <h2>Tools</h2>
    </div>
    <div class="column" id="column2">
      Python - 2 yrs <br>
      C# - 1+ yrs <br>
      C++ - 1 yr <br>
    </div>

    <div class="column" id="column3">
      HTML ~ 1 yr <br>
      CSS ~ 1 yr <br>
      Bash ~ 1 yr
    </div>

CSS：

.column
  position: absolute;
  color: white;
  font-size: 16px;
  line-height: 60px;


#column1
  margin-top: 100px;
  left: 300px;


#column2
  margin-top: 100px;
  left: 600px;


#column3
  margin-top: 100px;
  left: 900px;

【问题讨论】：

您希望它是什么样的？另外，您是否有不想要更复杂的解决方案（可能会也可能不会影响列的定位）的原因？

我会接受复杂的解决方案，但我不想花一个小时重新编码定位等等。我会编辑那部分，欢迎任何解决方案，我会弄清楚其余的。

工具标题单独位于列底部是否有原因？

因为它是简单的占位符代码，所以我稍后要添加更多的文本，所以要处理更多的列

列间距从何而来？你似乎更关心线条之间的高度。您能否准确说明您需要什么，您能否提供一张说明所需结果的图片？

【参考方案1】：

如果我正确理解您的问题，只需添加您的 css 样式“line-height:How ever long”

【讨论】：

请再看一下修改后的代码

【参考方案2】：

您可以将每种语言和年份放入

并将每种语言和年份包装在 div 中。然后添加 css 行高属性和你想要 div 的值。

【讨论】：

虽然这绝对是一种解决方案，但我需要 14 个不同的列，这不太实用，我需要一个更简单的解决方案，可以更好地执行代码