文字列の間に線

質問

お世話になります。
皆様のお知恵を貸してください。

レスポンシブデザインで飲食店のメニューページを作っているのですが、
品名と値段の間に線or点線を入れたいです。

<p><span class="menuname">天然真鯛</span><span class="menuprice">７５０円　</span></p>

menunameにはfloat:left、menupriceにはfloat:rightをかけておりpの両端に配置するようになっています。
表示環境によってpの幅が変わるので品名と値段の間が可変幅となっています。

pの背景に線を入れ品名・値段のspanに塗り背景を入れようと思いましたが大元の背景がグラデーションなのでだめでした。

何かよい方法ありますでしょうか、よろしくお願いします。

回答No.1

chie65536（@chie65535） · ベストアンサー

以下のようにして下さい。

<table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td nowrap width="1%">天然真鯛</td> <td width="10px"></td><td><table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000"><tr><td height="1px"></td></tr></table></td><td width="10px"></td><td nowrap width="1%">７５０円</td></tr></table>
<table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td nowrap width="1%">活シマアジ</td><td width="10px"></td><td><table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000"><tr><td height="1px"></td></tr></table></td><td width="10px"></td><td nowrap width="1%">８５０円</td></tr></table>
<table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td nowrap width="1%">活タコ</td> <td width="10px"></td><td><table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000"><tr><td height="1px"></td></tr></table></td><td width="10px"></td><td nowrap width="1%">７００円</td></tr></table>
<table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td nowrap width="1%">茹でタコ</td> <td width="10px"></td><td><table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000"><tr><td height="1px"></td></tr></table></td><td width="10px"></td><td nowrap width="1%">７００円</td></tr></table>
<table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td nowrap width="1%">活さざえ</td> <td width="10px"></td><td><table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000"><tr><td height="1px"></td></tr></table></td><td width="10px"></td><td nowrap width="1%">７５０円</td></tr></table>

内側のtableタグのbgcolor="#000000"属性で線の色が変わります。

内側のtableの中の<td height="1px">で、線の太さを１ピクセルにしています。

線の前後の空ける間隔は、品名の次の<td width="10px">で前に１０ピクセル分、価格の前の<td width="10px">で後ろに１０ピクセル分の隙間を空けています。

添付画像のように、ブラウザの幅を変更しても、文字の位置は左右に配置され、線のみ長さが変わります。

こういう裏技はCSSに慣れた人には思い付きません。

お礼

なるほど！tableですね！
確かにCSSで何とかしようという頭になっていました。
内側のtableの代わりにhrでも良さそうですね、ありがとうございました！