填满 html 中剩余的行空间
[英]Filling up the remaining row spaces in html
问题描述
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.
当您运行此 HTML 文件时，我希望在最顶部的块展开，以便它可以覆盖其行上的可用空间。 I tried inserting justify-content: space-between;我尝试插入justify-content: space-between; inside the .title li but it didn't work.在.title li里面，但它没有用。 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 个解决方案
解决方案1
1 已采纳 2021-04-09 10:50:02
You need to set display: flex in order to use justify-content: space-between您需要设置display: flex才能使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.