Q&A
些末なことですみませんが、ul直下にpを置くのは文法違反です。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul
前提・実現したいこと
リストは縦表示のまま、その横に文章を書く方法
ここに質問の内容を詳しく書いてください。
（例）<ul>でリストを作成しており、リストの右側に<p>で書いた文章を記入したいのですがcssでdisplay: inline-block;を使っても<ul>だけであったり<p>のみであったりとリストの横に文章を繋げる方法が分かりません。ネットで調べましたが要領を得られなかったのでご回答いただけると幸いです。
猫1 猫は元気
猫2 猫はやんちゃ
と表記したいです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>猫の実態</title> 6<meta name="description" content="猫の好きな物、日々の生活をご紹介"> 7<link rel="stylesheet" href="style2.css"> 8</head> 9<body> 10 <h1>猫の一日</h1> 11 <ul> 12 <li>猫1</li> 13 <p>猫1は元気</p> 14 <li>猫2</li> 15 <p>猫2はやんちゃ</p> 16 </ul> 17</body> 18</html>
CSS
1@charset "UTF-8"; 2body{ 3 background-color: gray; 4} 5h1{ 6 color: red; 7 font-size: 40px; 8 font-weight: bold; 9 line-height: 1.7; 10} 11li{ 12 color: white; 13 font-size: 30px; 14 font-weight: bold; 15} 16ul p{ 17 color: black; 18 font-size: 20px; 19 display: inline-block; 20} 21p{ 22 color: blue; 23} 24
試したこと
cssで横並びに表記する方法
補足情報（FW/ツールのバージョンなど）
リスト一つに説明一つを横並びにして、それをいくつか並べたいです。
リストを横並びにするわけではありません。
回答1件
0
ベストアンサー
こんな感じですか？
css
1ul{ 2 display: grid; 3 grid: auto-flow / auto auto; 4}
投稿2021/09/24 06:48
総合スコア36960
ありがとうございます。
出来ました。
ありがとうございます。
無事出来ました。
お役に立てたようで何よりです
あなたの回答
tips
プレビュー
