-1

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

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

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

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

4

3 回答 3

2

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

<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>

于 2012-05-09T23:22:30.680 回答
0

试试这个。样式是内联的；但你应该能够将它们移出

       <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>
于 2012-05-09T23:25:39.333 回答
0

你可以这样做：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 元素的背景与背景颜色匹配来完成此操作，这将使边框看起来消失在文本后面。

注意：我相信这就是字段集和图例标签的工作方式，但如果您将其用于页面标题而不是表单字段分组，则语义上会更好。

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

于 2012-05-10T19:04:57.777 回答