程序员经验分享-hwhale

边框位于文本下方但不穿过文本

2024-01-31

我正在为我的杂志做网页设计。现在，我正在尝试制作类似于 1996 年标题的内容，如下图所示。文本下方有边框，但文本周围有白色背景。任何人都可以帮助我做到这一点吗？ :)


当然可以，试试这个：

HTML

<div class="heading">
  <h1>Heading Title</h1>
</div>​

CSS

.heading {
  text-align:center;
  border-bottom:2px solid #d5d5d5;
}
.heading h1 {
  display:inline-block;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:100;
  font-size:36px;
  position:relative;
  top:18px;
  background:#fff;
  padding:0 12px;
}
div,h1 {
    margin:0;
    padding:0;
}​

jsFiddle 示例 http://jsfiddle.net/j08691/jkhGx/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

边框位于文本下方但不穿过文本 的相关文章

  • 如何在 HTML 中制作三角形？

    我想使用基本的 CSS 在 HTML 页面中制作三角形 我正在使用需要时间加载的三角形图片 因此 我想减少页面的加载时间 HTML 不可能 但 CSS 可以 例子 div class div

  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl

  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section

  • 在打印 CSS 上在每个页面周围绘制边框？

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le

  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有

  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co

  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w

  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口

  • 仅水平 CSS 视差效果，层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w

  • 使用溢出时无法隐藏滚动条：auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y

  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许

  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

  • 是否有针对 CSS 位置和可点击区域的 Android 浏览器错误的解决方法？

    当您有一些可点击的内容时 例如 a a

  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https

  • 由于 MIME 类型不受支持，拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是

  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些

  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认

  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl

  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li

  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

热门标签