1

私はこれにかなり慣れていないので、もう少し説明する必要がある場合はご容赦ください。Web サイトのサブタイトルをタイトルの中央に配置します。ただし、サブタイトルにも下枠を付けたいと思います。ただし、境界線を字幕と同じ長さにしたいので、表示することにしました: inline-block と text-align: center. 次に、下の境界線で適用します。ただし、機能していません。サブタイトルは左揃えのままです。以下に HTML と CSS を添付しました。

私のHTML

私のCSS

マイページの現在の外観

4

4 に答える 4

3

私はあなたがこれを探していると思います:デモを見る

padding-bottomを適用することで、これを実現できます。

CSS:

h2 {
    font-family: Georgia;
    font-style: italic;
    font-size: 25px;
    color: black;
    padding-bottom:5px;
    border-bottom: 1px solid #000;
    display: inline-block;    
}
于 2012-07-26T04:58:12.067 に答える
1

問題を解決する簡単な方法は、プロパティを削除display: inline-block;しborder-bottomて追加することです。この JSFiddleをチェックして結果を確認してください。text-decoration: underline

于 2012-07-26T04:47:53.703 に答える
0

text-decoration:underline;ボーダーボトムではなくを与えるだけです。

HTML

<h1>tittle</h1>
<h2>subtittle</h2>

CSS 

h1 {
text-align:center;
}

h2 {
text-align:center;
text-decoration:underline;
}

デモを見る:- http://tinkerbin.com/7LQqmXkZ

更新された回答

span下のタグを使用してh2、与えるborder-bottomよりspanもタグに与えるpadding-bottomことができるので、希望する結果が得られることを願っています....

HTML

<h1>tittle</h1>
<h2><span>subtittle</span></h2>

CSS

h1 {
text-align:center;
}

h2 {
text-align:center;
}

h2 span {
border-bottom:1px solid red;
padding-bottom:5px;
}

http://tinkerbin.com/gUQO8U7u

于 2012-07-26T04:50:43.660 に答える
0

要素がインライン ブロックになった場合 (コンテンツに必要な最小幅に幅を設定する目的で)、そのコンテンツを中央に配置しても意味がないため、それ自体ではなく、text-align: centerを含むブロックに適用する必要があります。(これは、テキストと同じ幅のボックス内に含まれるテキストを中央に配置するだけです。)h2h2

問題は次のように縮小できます。

<!DOCTYPE html>
<style>
h2 {
  display: inline-block;
  border-bottom: 1px solid black;
  text-align: center;
}
</style>
<hgroup>
<h1>Ken Fedor</h1>
<h2>Designer. Developer. Dreamer.</h2>
</hgroup>

ここでの修正は、スタイル シートに次を追加することです。

hgroup {
  text-align: center;
}

（これが、AKの回答のjsfiddleデモを機能させるものです。回答テキストには記載されていませんが、このコードはそこにあります。パディングの使用は問題とは無関係です。）

于 2012-07-26T05:15:35.030 に答える