みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssで見出しの両側に文字を表示したい

css+htmlでWebページを作成しています。
その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。
(完成イメージは画像参照)。
ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。
見出しの両側に表示させるにはどうしたらよいですか?
よろしくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<STYLE TYPE="TEXT/CSS">
<!--
div.heading {
width: 450px;
background-color: #e0e0e0;
border: #e0e0c0 solid;
border-width: 1px 1px 2px;
margin-left: auto;
margin-right: auto;
}

/* --- 見出し --- */
div.heading h3 {
margin: 0;
padding: 7px 7px 4px;
border-bottom: 4px #9825e1 solid;
font-size: 100%;
line-height: 100%;
text-align: center;
}

span {
float: left;
width: 100px;
text-align: center;
}

span.back {
float: left;
}
span.next {
float: right;
}

}-->
</STYLE>
</head>
<body>
<!--全体(wrapper) Start-->

<div class="all-wrapper">

<div class="main-wrapper">
<div class="heading">
<h3>見出し</h3>
<span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span>
</div>
</div>

</div>

</body>
</html>

投稿日時 - 2011-03-08 01:31:56

QNo.6577459

困ってます

質問者が選んだベストアンサー

htmlにdivを追加しましたが、こんな感じでいかがでしょうか?(すみません確認はしてないです)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<STYLE TYPE="TEXT/CSS">
<!--
div.heading {
width: 450px;
background-color: #e0e0e0;
border: #e0e0c0 solid;
border-width: 1px 1px 2px;
margin-left: auto;
margin-right: auto;
}

/* --- 見出し --- */
div.hoge {
margin: 0;
padding: 7px 7px 4px;
border-bottom: 4px #9825e1 solid;
text-align: center;
line-height: 100%;
}
div.heading h3 {
display: inline;
margin: 0;
}

span {
float: left;
width: 100px;
text-align: center;
}

span.back {
float: left;
}
span.next {
float: right;
}

}-->
</STYLE>
</head>
<body>
<!--全体(wrapper) Start-->

<div class="all-wrapper">

<div class="main-wrapper">
<div class="heading">
<div class="hoge">
<h3>見出し</h3>
<span class="back"><a href="#">BACK</a></span>
<span class="next"><a href="#">NEXT</a></span>
</div>
</div>
</div>

</div>

</body>
</html>

投稿日時 - 2011-03-08 02:15:11

補足

回答ありがとうございます。
FireFox、Opera、Safari、Chromeでは動作確認できました。
IEではうまく表示できませんでした。
アドバイスをお願いいたします。

投稿日時 - 2011-03-08 23:42:34

お礼

IE6・7に関してはIE6・7のスターハックで自己解決しました

html*span {
margin-top: -22px;
}

大変ありがとうございました。

投稿日時 - 2011-03-09 02:40:01

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

html側を .back → h3 → .next の順に配置するなどすれば比較的簡単なんですが、気持よくh3を上に置きたい場合はちょっと悩ましいですね。
絶対配置でこんな感じではいかがでしょう?
span要素の、
top,left,right
の値を微調整して位置を調整すれば、ご希望の感じにできると思います。
(すみませんまた確認してません)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<STYLE TYPE="TEXT/CSS">
<!--
div.heading {
position: relative;
width: 450px;
background-color: #e0e0e0;
border: #e0e0c0 solid;
border-width: 1px 1px 2px;
margin-left: auto;
margin-right: auto;
}

/* --- 見出し --- */
div.heading h3 {
margin: 0;
padding: 7px 7px 4px;
border-bottom: 4px #9825e1 solid;
font-size: 100%;
line-height: 100%;
text-align: center;
}

span {
width: 100px;
text-align: center;
}

span.back {
position: absolute;
top: 0px;
left: 0px;
}
span.next {
position: absolute;
top: 0px;
right: 0px;
}

}-->
</STYLE>
</head>
<body>
<!--全体(wrapper) Start-->

<div class="all-wrapper">

<div class="main-wrapper">
<div class="heading">
<h3>見出し</h3>
<span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT</a></span>
</div>
</div>

</div>

</body>
</html>

投稿日時 - 2011-03-09 02:33:40

あなたにオススメの質問