1

内部にヘッダーがあるdivがあり、アンダースコアがdivの約80％をカバーし、両側に10％のインデントが表示されるように、ヘッダーに下線を付けたいと思います。また、アンダースコアをヘッダーの下の数ピクセルにします。私はこれを試しています

htmlの部分で

<div id="divname">
     <h2>HEADER</h2>
</div>

cssの部分で

#divname h2 {
text-align: center;
font-family:arial,sans-serif;
text-decoration:underline;
}

ただし、ここでは、ヘッダーに高さのギャップがなく直接下線が引かれています。また、下線の幅はヘッダーデータと同じです。どうやってやるの ？

4

3 に答える 3

10

set a border to the h2 element, and set its width to 80%; margin:auto; is used to center it

#divname h2{
    width:80%;
    margin:auto;
    display:block;
    border-bottom:1px solid gray;
}

here is a jsfiddle : http://jsfiddle.net/bxKZ3/

于 2012-11-23T15:51:05.550 に答える
1

I don't know if you can stylize the underline with CSS, but theres another way round:

Take a look at this jSFiddle

HTML

<div id="divname">
    <h2>HEADER</h2>
    <div class="underline"></div>
</div>​

CSS

#divname h2 {
    text-align: center;
    font-family:arial,sans-serif;
    text-decoration:underline;
}
.underline{
    height:1px;
    background:#000;
    margin:0px 10px;
}

Obviously, the background:#000; will change the underline color. Changing the margin:0px 10px; will decide how much space is on either side of the underline (I believe this was one of your requirements).

Hope it helps.

于 2012-11-23T15:52:51.930 に答える
1

You can do this without extra markup if you use the before/after pseudo elements:

http://jsfiddle.net/bxKZ3/1/

h2{
    text-align: center;
    background:#eee; 
}
h2:after{
    border-bottom:1px solid gray;
    display: block;
    margin: 1em 10% 0 10%;
    content: " ";
}

<h2>bonjour</h2>
于 2012-11-23T16:15:53.367 に答える