Question

我想做的很简单，但我真的不知道该怎么做。我想要的是使用div类来设置这样的标题：

----页面标题----------------------------------------- --------

但显然我希望虚线是实线。这可能吗？非常感谢。

从其他帖子来看，我只是设计一个hr标签，但没有任何例子我尝试过工作。

Answer 1

您可以使用没有右边，底边或左边框的字段集图例。

<html>
<head>
    <title> test page </title>
    <style type="text/css">
        fieldset.cat_title
        {
            display: block;
            margin: 5px 0;
            border-top: 1px solid #000;
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
        }
        fieldset.cat_title legend
        {
            margin: 0 0 0 50px;
        }
    </style>
</head>

<body>
    <fieldset class="cat_title">
        <legend>title</legend>
    </fieldset>
</body>

Answer 2

试试这个。风格是内联的;但你应该能够将它们移出

       <div style="display:block">
            <div style="display:inline; float:left;"><hr style="width:100px" /></div>
            <div style="display:inline; float:left;">Page Title</div>
            <div style="display:inline; float:left;"><hr style="width:600px" /></div>         
        </div>

Answer 3

你可以这样做： http://jsfiddle.net/zAytA/

简单的HTML

<h1 class="h-line"><b>Page Title</b></h1>

CSS

.h-line{
    border-top:1px solid #ccc;
    height:1px;
    margin:8px 0 7px 0;
    position:relative;
}
.h-line b{
    position:absolute;
    display:block;
    bottom:-8px;
    left:32px;
    font-size:16px;
    padding:0 6px;
    background:#FFF;

}

这个想法是，对于你的标题，你只需使用容器元素的边框（在这个例子H1和我只选择使用顶部边框），然后添加另一个标记来包含实际文本，你绝对可以相对于容器定位。

我使用了b标签，因为它在语义上不像span那样重要，但字符较少。

我的容器高度为1px，以确保它显示出来，但可能没有必要。

一个重要的方面是确保容器有一些与标题中文本大小相匹配的边距，或者标题下方/上方的任何内容最终可能会超过标题。

然后，通过使b元素的背景与背景颜色匹配来完成此操作，这将使边框看起来消失在文本后面。

注意：我相信这是fieldset和legend标签的工作方式，但如果你将它用于页面标题而不是表单字段分组，那么它在语义上会更好。

如果您具有非纯色背景，则此概念将无法正常工作。这将使文本“突出显示”背景颜色变得明显并打破这种“神奇”效果。

如何为单词添加样式（HTML / CSS）

3 个答案: