Filling up the remaining row spaces in html
Question
I want the blocks at the very top when you run this HTML file to spread so that it can cover the spaces available on its row. I tried inserting justify-content: space-between; inside the .title li but it didn't work. please tell me what is my code missing. Also if it's ok can you please tell me what color combinations would be good for the font and its background? thank you
<.DOCTYPE html> <:-- Names --> <html> <head> <title> Block and Inline Flow </title> <style type = "text/css">;title li { display: inline; background-color: papayawhip; border: double; border-color: blue red green yellow; margin: 2px. padding; .5em: } </style> <style type = "text/css">;student1 li { display: block; background-color:#000000; border: none; border-color: none; margin: 2px. padding; .5em: } </style> <style type = "text/css">;student2 li { display: block; background-color:#000080; border: none; border-color: none; margin: 2px. padding; :5em: } </style> </head> <body> <h1> Student Information: </h1> <ul class = "title li"> <li>Name</li> <li>Date of Birth</li> <li>Home Address</li> <li>E-mail Address</li> <li>School</li> <li>School Address</li> </ul> <ul class = "student1 li"> <font color=grey> <li>Name: ******** </li> <li>Date of Birth: ********</li> <li>Home Address: ********</li> <li>E-mail Address: ********</li> <li>School: ********</li> <li>School Address: ********</li> </font> </ul> <ul class = "student2 li"> <font color=gold> <li>Name: ******** </li> <li>Date of Birth: ********</li> <li>Home Address: ********</li> <li>E-mail Address: ********</li> <li>School: ********</li> <li>School Address: ********</li> </font> </ul> </body> </html>
1 answers
solution1
1 ACCPTED 2021-04-09 10:50:02
You need to set display: flex in order to use justify-content: space-between
<.DOCTYPE html> <:-- Names --> <html> <head> <title> Block and Inline Flow </title> <style>;title{ display: flex; flex-direction: row; justify-content: space-between; list-style-type. none: };title li { background-color: grey; border: double; border-color: blue; margin: 2px. padding; .5em: } </style> <style>;student1 li { display: block; background-color:#000000; border: none; border-color: none; margin: 2px. padding; .5em: } </style> <style type = "text/css">;student2 li { display: block; background-color:#000080; border: none; border-color: none; margin: 2px. padding; :5em: } </style> </head> <body> <h1> Student Information: </h1> <ul class = "title li"> <li>Name</li> <li>Date of Birth</li> <li>Home Address</li> <li>E-mail Address</li> <li>School</li> <li>School Address</li> </ul> <ul class = "student1 li"> <font color=grey> <li>Name: ******** </li> <li>Date of Birth: ********</li> <li>Home Address: ********</li> <li>E-mail Address: ********</li> <li>School: ********</li> <li>School Address: ********</li> </font> </ul> <ul class = "student2 li"> <font color=gold> <li>Name: ******** </li> <li>Date of Birth: ********</li> <li>Home Address: ********</li> <li>E-mail Address: ********</li> <li>School: ********</li> <li>School Address: ********</li> </font> </ul> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
filling up remaining height
Filling up remaining space in svg
HTML button filling remaining width
Filling up remaining height with CSS flexbox
Content div not filling up the remaining space
Filling remaining space in row by last element
Divs on both sides of main div, filling the remaining spaces
images not filling up to end of row
Over-scroll y filling up remaining space?
div filling up all remaining white space (not 3 columns)
Related Tags