【问题标题】:how is the html legend tag displayed in the middle of the border?html图例标签如何显示在边框中间?
【发布时间】:2017-02-11 22:49:30
【问题描述】:

我很好奇网络浏览器如何通过在边框之间插入内容来显示legend 标签内容。如果我想自己重新创建它,我想我将不得不搞乱绝对/相对定位,但我认为/希望有一种更清洁的方式..:P

我检查了源代码但很快就放弃了:P

下面是一些示例代码:

<fieldset>
  <legend>How did i get here?</legend>
  Name: <input type="text"><br>
  Email: <input type="email">
</fieldset>

【问题讨论】:

  • 这绝对是一个有见地的答案,但它没有提供我正在寻找的答案。例如,无论您将legend 标签的font-size 增加多少,它都会看起来干净且居中。然而,在上面的答案中,用户正在对边距和填充进行猜测工作,以查看定位是否准确呈现。

标签: html fieldset


【解决方案1】:

我找到了Add A Line Through Your Titles With CSS的精彩教程

所以我发了this JSFiddle

  • 无论文本大小如何,该行将始终位于标题的中间。

  • 确保为.box 留出足够的空间,以避免文本与标题太接近。

  • 如果你想让legend看起来一样,你可以改变.top_box类,把text-align: left;加上一些padding-left

我希望这能回答你的问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-01-24
    • 2013-10-24
    • 1970-01-01
    • 1970-01-01
    • 2022-08-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多