我可以重叠 CSS 边框吗？尝试从页面边缘到文本末尾添加下划线

发布于 2024-08-23 18:03:18 字数 593 浏览 2 评论 0原文

我试图将标题（宽度可变）居中，并让下划线从页面的左边缘延伸到文本的末尾。除非我错过了一些东西，否则似乎没有一种简单的方法可以做到这一点！我最接近我想要的是：

<style type="text/css">

#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}

#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}

h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}

</style>

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

这样，文本居中，边框充当下划线，而wrapper1上的边框从左边缘延伸到中心。但是，由于标题位于包装器内，并且包装器上的边框位于内容之外，因此包装器边框位于标题边框下方。

非常感谢收到的任何建议 - 这让我发疯！

原文

I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:

<style type="text/css">

#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}

#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}

h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}

</style>

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.

Any suggestions gratefully received - this is driving me mad!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

避讳 2024-08-30 18:03:18

在您的 #wrapper2 中：

bottom: -4px;

将使其向下移动 4 个像素以与另一条线重叠。

（在 Safari 中测试，有效）

In your #wrapper2:

bottom: -4px;

Will make it move 4 pixels downwards to overlap the other line.

(Tested in Safari, works)

回复收藏 0 原文

剪不断理还乱 2024-08-30 18:03:18

尝试删除两个包装器上的 padding-bottom 和 margin-bottom（设置为 0），然后将其添加回内部包装器上，直到看起来正确为止。

好的，我尝试了一下，这对我有用。我必须在两个包装器上放置相对位置，这样您就可以将内部包装器从其原始位置向下推几个像素。

<html>
<head><title>test</title></head>
<body>
<style type="text/css">

#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}

#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}

h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}

</style>

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

</body>
</html>

Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.

OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.

<html>
<head><title>test</title></head>
<body>
<style type="text/css">

#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}

#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}

h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}

</style>

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

</body>
</html>

回复收藏 0 原文

~没有更多了~