-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

次のようなことができます: 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 タグを使用しました。

表示されるようにコンテナの高さを 1px にしていますが、必要ないかもしれません。

重要な側面の 1 つは、タイトル内のテキストのサイズに一致する余白がコンテナーにあることを確認することです。そうしないと、タイトルの下/上のコンテンツがタイトルと重なってしまう可能性があります。

次に、b 要素の背景を背景色に合わせて仕上げます。これにより、境界線がテキストの後ろに隠れるように見えます。

注: これがフィールドセットと凡例タグのしくみだと思いますが、フォーム フィールドのグループ化ではなくページ タイトルに使用している場合は意味的に優れています。

この概念は、背景が単色でない場合はうまく機能しません。これにより、テキストの「ハイライト」の背景色が明らかになり、その「魔法の」効果が壊れます。

于 2012-05-10T19:04:57.777 に答える
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 に答える