Q&A
タグ間違えていません？C言語ではないですよね。
■実現したいこと
回り込みを解除し、リストに下線を引くこと。
■質問内容
listをfloatを使って横並びにし、clear:both;で解除しようとしたがうまくいかず、clearfixを使用した。次にborder-bottomで１本線を引いたつもりが二本の線になり、困っています。
■エラーの内容
リストの上の線と、下の線の二本が引かれた。
ソースコードを見せていただけると回答できそうですー！
以下の内容で頭書のエラーになりました。よろしくお願いします。 kamome_suiheiより
■ソースコード
88 <ul class="bird_menu clearfix">
89 <list ><img src="images/s_photo_1.png" alt="モズ"/><p>ツバメが飛来<br>2016年5月15日</p></list>
90 <list ><img src="images/s_photo_kogera.png" alt="コゲラ"><p>ツバメが飛来<br>2016年5月15日</p></list>
91 <list><img src="images/s_photo_sekirei.png" alt="セキレイ"><p>ツバメが飛来<br>2016年5月15日</p></list>
92 <list><img src="images/s_photo_sijuukara.png" alt="シジュウカラ"><p>ツバメが飛来<br>2016年5月15日</p></list>
93 <list><img src="images/s_photo_suzume.png" alt="スズメ"><p>ツバメが飛来<br>2016年5月15日</p></list>
94 </ul>
■style.css
95 .clearfix ::after{
96 clear: both;
97 display: block;
98 content: "";
99 border-bottom: 1px solid #3177FB;
100 padding-bottom:20px;
101 margin-bottom: 10px;
102 }
103 .bird_menu li {
104 list-style-type: none;
105 }
106 .bird_menu img {
107 float: left;
108 padding: 2px;
109 border: 1px solid #06F858;
110 border-radius: 2px;
111 margin-right: 10px;
112 }
追記) コードを付けました。
ちなみに、追記内容は質問文に追記しておいたほうが色々な人の目に留まりやすくなって回答が得られやすくなりますよ。また、コードブロックを使用するとソースコードが見やすくなります！
質問タグを「CSS」に変更してください。
回答2件
0
ベストアンサー
原因
ソースをみて原因と思しきところは以下の２つです
1. タグが誤っています 2. borderを指定するclassが誤っています
- タグが誤っています
<list> -> <li> ですね。
参考までに、The W3C Markup Validation ServiceでHTMLの文法チェックが可能です。
- borderを指定するclassが誤っています
リストに下線を引くのであれば、<li>に指定すると良いと思います。
解決方法
以下のようにすると線が二重になることはないかと思います。
codepenでも挙動確認済みです
HTML
1<ul class="bird_menu clearfix"> 2 <li><img src="images/s_photo_1.png" alt="モズ"/>ツバメが飛来<br>2016年5月15日</li> 3 <li ><img src="images/s_photo_kogera.png" alt="コゲラ">ツバメが飛来<br>2016年5月15日</li> 4 <li><img src="images/s_photo_sekirei.png" alt="セキレイ">ツバメが飛来<br>2016年5月15日</li> 5 <li><img src="images/s_photo_sijuukara.png" alt="シジュウカラ">ツバメが飛来<br>2016年5月15日</li> 6 <li><img src="images/s_photo_suzume.png" alt="スズメ">ツバメが飛来<br>2016年5月15日</li> 7</ul>
CSS
1.clearfix ::after{ 2 clear: both; 3 display: block; 4 content: ""; 5} 6.bird_menu li { 7 border-bottom: 1px solid #3177FB; 8 padding-bottom:20px; 9 margin-bottom: 10px; 10 list-style-type: none; 11} 12.bird_menu img { 13 float: left; 14 padding: 2px; 15 border: 1px solid #06F858; 16 border-radius: 2px; 17 margin-right: 10px; 18}
投稿2020/03/03 15:23
総合スコア181
助かりました。有難うございます。
何故、<list>にしたのか、不明ですが……。
今後ともよろしくお願いします。
いえいえ、解決してよかったですー！
takabosoftさん、kei344さんもおっしゃっていますが、よければ質問のタグを「CSS」に変えていただけると嬉しいです。（あとソースコードの質問文への追記も…）
後からご自身で振り返る時はもちろん、他の人が同じような問題にぶつかったときに見つけやすいかと思いますので！
いろいろとご指摘、ありがとうございます。
????
0
初心者なので全然的外れの回答かもしれませんが、
border-bottom: solid
にするとどうなりますかね？
投稿2020/03/03 01:19
退会済みユーザー
総合スコア0
回り込みを解除しようとして、clearfix::afterの中にclear:both;とborder-bottom:1px solid #000;と記入しました。
リストの上の線と下の線が出てきます。上の線は不要なんですが、何故か表示されます。
あなたの回答
tips
プレビュー
