Q&A
CSSのborder-bottomを使用して下線をつけたいと考えています。
しかし、スペースを入力するとスペース部分にまで下線がついてしまっています。
スペースに下線を付けないようにするにはどうしたら良いでしょうか？
【現在の表示状況】
【ソースコード】
●html
<div class="FunctionHeader"> 機能: 機能A 機能B 機能C </div>●CSS
div.FunctionHeader
{
color:black;
border-bottom: 1px solid #003f8e;
}
宜しくお願いします。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
皆さんご回答ありがとうございます。
色々やりかたがあるのですね。
根本的には私のhtmlとCssの知識が乏しいので時間がある際に勉強します。
皆さんありがとうございました。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
回答4件
0
こういうことでしょうか？とりあえず2案。
その1。div自体をdisplay: inline-block;にする。
css
1div.FunctionHeader { 2 display: inline-block; 3 color:black; 4 border-bottom: 1px solid #003f8e; 5}
その2。divはそのままにspanで下線を引く。
html
1<div class="FunctionHeader"><span> 機能: 機能A 機能B 機能C </span></div>
css
1div.FunctionHeader span { 2 color:black; 3 border-bottom: 1px solid #003f8e; 4}
それとも「機能: 」の「 」の部分には引きたくないってことですか？
その場合は、その2のspanで各項目を囲ってください。
<span>機能:</span>
投稿2016/12/06 07:04
総合スコア2722
0
display:flexで横並べにして、divタグとspanタグを併せてこんな風にするのはだめなのでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 div.container { 8 display: flex; 9 } 10 11 div > span { 12 border-bottom: solid; 13 } 14 </style> 15</head> 16<body> 17<div class="container"> 18 <div> 19 <span>text1</span> 20 21 </div> 22 <div> 23 <span>text2</span> 24 25 </div> 26 <div> 27 <span>text3</span> 28 29 </div> 30</div> 31</body> 32</html>
投稿2016/12/06 07:12
編集2016/12/06 07:13
退会済みユーザー
総合スコア0
0
ベストアンサー
空白も文字として認識されるので、少しやり方を変える必要がありますね。
html
1<div class="FunctionHeader"><span>機能:</span> <span>機能A</span> <span>機能B</span> <span>機能C</span> </div>
css
1div.FunctionHeader > span 2{ 3 color:black; 4 border-bottom: 1px solid #003f8e; 5 margin-right:2em; 6}
「機能」の文字はそれぞれ<span>で囲って、下線は<span>で囲われた部分のみに適用。marginで適度に余白を取れば良い感じになります。
投稿2016/12/06 07:10
総合スコア486
0
HTMLの組み方に問題があります。
divの中にスペースでテキストを置くのはこの場合良い手ではありません。
まずはHTMLを見直してください。
参考サイト：HTMLクイックリファレンス
ulやol等のリストで横並びにしても良いですし、span等のインライン要素で区切っても良いですし、その他にもたくさんの方法があります。
そうすればCSSも特に難しいことはありません。
投稿2016/12/06 07:00
総合スコア199
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。