dl,dt,ddを表形式表示をするスタイル

いろいろブラッシュアップして、これが最善策。

HTML
<dl>
	<div>
		<dt>内容量</dt>
		<dd>1個230g</dd>
	</div>
		<div>
		<dt>賞味期限</dt>
	<dd>3週間</dd>
	</div>
	<div>
		<dt>原材料</dt>
		<dd>砂糖 小豆 黒砂糖 寒天 水飴 ソルビトール</dd>
	</div>
	<div>
		<dt>保存方法</dt>
		<dd>直射日光並びに高温多湿をさけて保存</dd>
	</div>
</dl>
CSS
dl,
dt,
dd {
	box-sizing: border-box;
}

dl {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	margin-bottom:0;
	margin-top:0;
}

dl>div{
	display:flex;
}

dt,
dd {
  	padding: 10px 10px 10px 10px;
	margin-bottom:0;
	border-bottom: 1px solid #ddd;
}

dt {
	border-left:none;
	font-weight:normal;
	flex-basis:20%;
	background:#eee;
	border-right: 1px solid #ddd;
}

dd {
        border-right: 1px solid #ddd;
        margin:0;
        flex-basis:80%;
}

dlの子要素にdivを挟んでるところが微妙であるが、

dl>div{
	display:flex;
}

これを

dl>div{
	display:block;
}

に、変更することで縦積みにしてレスポンス対応にできる。

サンプル

内容量
1個230g
賞味期限
3週間
原材料
砂糖 小豆 黒砂糖 寒天 水飴 ソルビトール
保存方法
直射日光並びに高温多湿をさけて保存

コメント

タイトルとURLをコピーしました