CSS and html help pls | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

CSS and html help pls

Im trying to put together two different sections, the Green title and the blue description, but I cant put them in the same line and make them different colours. Help pls Here is the code, if you dont understand something, please let me know. https://sololearn.com/compiler-playground/W8MsIBaSOuez/?ref=app

15th Jan 2024, 10:31 PM
Pepe Grillo
Pepe Grillo - avatar
8 Answers
+ 2
<li> is a block element, just like <p> therefore, it is recommended to enter all the information in the list in <li> and already use the built-in text styling tags in it: <span>, <strong>, <b>, <i>, <em>, <u> and others... Of course, you can fix your code by assigning "display: inline;" to the <li> and <p> tags and putting <br> tags in the line breaks, but in my opinion this will be wrong. You need to immediately learn how to compose an html document correctly.
15th Jan 2024, 11:33 PM
Solo
Solo - avatar
+ 2
Instead of having the p tag, use the span tag. Paragraph (<p>) tags are automatic block elements (which means they put themselves on their own line) and really should only be used for paragraphs, not single sentences. Then after that, you cna out them in a div and put the display as flex.
15th Jan 2024, 11:17 PM
Justice
Justice - avatar
+ 2
Justice thank you for evaluating my answer, I just wanted to emphasize the importance of understanding the very element of the list <li>. In general, of course, you can use the display:flex; yes, and the entire style of the list should be canceled and rewritten at your discretion, but this is more routine work requiring more in-depth knowledge...😎
15th Jan 2024, 11:49 PM
Solo
Solo - avatar
+ 1
Solo Yeah, I ended up telling them that on a comment on their code with an example but you probably put it better.
15th Jan 2024, 11:35 PM
Justice
Justice - avatar
+ 1
Solo I super duper agree. They may have to refactor a little, but it'll be worth it to follow the pattern that'll make it less work when they want to implement something similar in the future.
15th Jan 2024, 11:52 PM
Justice
Justice - avatar
+ 1
Justice Solo thank you both for helping! :D
16th Jan 2024, 10:51 PM
Pepe Grillo
Pepe Grillo - avatar
+ 1
Pepe Grillo I was glad to help. So what decision have you made? Have you tried assigning display inline tags?
16th Jan 2024, 11:04 PM
Solo
Solo - avatar
+ 1
Solo Yeah, I did that and it worked, It was an asignment and I have already sent it to the teacher. He said It was perfect! Thanksss
17th Jan 2024, 4:35 PM
Pepe Grillo
Pepe Grillo - avatar