1

下の図のような見出しを持つコンテンツのブロックを作成するにはどうすればよいですか? 以前5px solid #444751はいくつかのテストを行っていましたが、名前を行の右と中央に揃えることができません。それらの下に画像を配置します。

ここに画像の説明を入力

4

6 に答える 6

1

これを試して：

<div class="line"></div>Batteries


.line {
    border-top:5px solid #444751;
    float:left;
    width:200px;
    margin-top:7px;
    margin-right:5px;   
}
于 2012-05-17T13:33:00.480 に答える
1

テキストをバーの中央に揃えるために必要なのはvertical-align. このJSFiddleを見てください。

使用したCSSはこちら

#bar {
    width: 150px;
    height: 5px;
    background: black;
    display:inline-block;
}
#text{
    text-transform: uppercase;
    display:inline-block;
    vertical-align: -2px;
}
于 2012-05-17T13:34:45.853 に答える
1

グラデーションを使用して効果を実現できます。HTML は最小限です。

<h1>BATTERIES</h1>

また、多くの CSS も必要ありません。

h1 {
    font-family: sans-serif;
    line-height: 25px;
}
h1:before {
    width: 200px;
    height: 25px;
    display:inline-block;
    background: linear-gradient(transparent 40%, #000 40%, 
        #000 60%, transparent 60%);
    content:'';
}

これですべてです。http://dabblet.com/gist/2719686で実際に見ることができます。

グラデーションは IE9 以前では機能しないことに注意してください。

于 2012-05-17T15:43:01.727 に答える
0

これを試して

<html>
        <head>
            <style>
                .Bat{
                float: left;}
                .Line{
                float: left;
                width:150px;}
                hr{
                height:5px;
                background-color:#444751;}
            </style>
        </head>
            <body>
               <div class="Line">
                  <hr>
               </div>
               <div class="Bat">
                  <b>BATTERIES</b>
               </div>
        </body>
    </html>
于 2012-05-17T13:43:43.673 に答える
0

ここ<fieldset>では、特にテキストの幅が動的な場合にうまく機能します。

<fieldset class="BlackLine">
    <legend>Hello World</legend>
    <div>
        Content
    </div>
</fieldset>

CSS:

fieldset.BlackLine {border-style:none; border-top:solid 5px black;direction:rtl;}
fieldset.BlackLine > legend, fieldset.BlackLine > div {direction:ltr;}

例: http://jsfiddle.net/XY24Q/

于 2012-05-17T13:36:49.280 に答える
0

次のように 2 つの div に分割します: http://jsfiddle.net/DigitalBiscuits/hUaht/

于 2012-05-17T13:34:34.807 に答える