填满 html 中剩余的行空间
[英]Filling up the remaining row spaces in html
问题描述
当您运行此 HTML 文件时，我希望在最顶部的块展开，以便它可以覆盖其行上的可用空间。 我尝试插入justify-content: space-between; 在.title li里面，但它没有用。 请告诉我我的代码缺少什么。 另外，如果可以的话，你能告诉我什么颜色组合对字体及其背景有好处吗？ 谢谢你
<.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
您需要设置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.