文章/答案/技术大牛

发布

社区首页 >问答首页 >如何为绝对定位的HTML元素对齐基线

问如何为绝对定位的HTML元素对齐基线
EN

Stack Overflow用户

提问于 2021-09-02 22:15:50

回答 2查看 85关注 0票数 1

我正在尝试使用CSS在HTML段落的页边空白处编写一个短标签，其方式与HTML列表项的标签方式类似。我认为我应该这样做的方式是使标签成为一个绝对定位的内联块，它在页边距内移动(参见下面的HTML+CSS代码)。这和我预期的一样，只是我找不到一种方法将标签文本的基线与相应段落的第一行对齐。

HTML+CSS代码：

.labeled {
  margin-left: 40px;
  position: relative;
}

.labeled::before {
  display: inline-block;
  content: attr(data-label);
  position: absolute;
  width: 40px;
  left: -40px;
  /* How to vertically position so paragraph and label have same baseline? */
}

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis
  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.
</p>

The same code in JSFiddle

问题是标签与段落顶部的第一行垂直对齐，而不是我希望它们在基线上对齐：

如果不是上标使第一行更高，上图中的两个“L”将垂直对齐。

如何通过正确的垂直对齐来获得相同的结果？(我愿意以不同的方式做事情，并且我愿意假设标签永远不会放在页边距的一行内；我也同意标签在页边距内右对齐，而不是左对齐，如果这有任何帮助的话。另一方面，我不想使用任何类型的JavaScript，我希望避免丑陋的黑客攻击。(我的要求是不是太高了？)

html

css

回答 2

Stack Overflow用户

发布于 2021-09-02 23:11:25

去掉position:absolute并使用负边距

.labeled {
  margin-left: 40px;
  position: relative;
}

.labeled::before {
  display: inline-block;
  content: attr(data-label);
  width: 40px;
  margin-left:-40px;
}

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis
  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.
</p>

票数 4

Stack Overflow用户

发布于 2021-09-02 22:27:04

您可以向.labeled::before添加top: .2em;

.labeled {
  margin-left: 40px;
  position: relative;
}

.labeled::before {
  content: attr(data-label);
  position: absolute;
  width: 40px;
  left: -40px;
  top: .2em;
  /* How to vertically position so paragraph and label have same baseline? */
}
.adjusted {
  font-size: 25px;
}

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis
  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.
</p>

<p class="labeled adjusted" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis
  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.
</p>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69037561

复制

相似问题

问如何为绝对定位的HTML元素对齐基线
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为绝对定位的HTML元素对齐基线EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为绝对定位的HTML元素对齐基线
EN