<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字測試</title> </head> <body> <ul> <li><p>一行文字</p></li> <li><p>這里是比較長的兩行文字</p></li> </ul> </body> </html>
/* 傻大本粗RESET*/ *{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;} body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;} /* 代碼開始 */ ul {width: 500px;margin: 100px auto;overflow: hidden;} /* 開始了！！！！ */ li { /* 這些都不重要 */ float: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px; /* 重點 */ text-align: center; } /* 重點 */ p {display: inline-block;text-align: left;}
解決方法二：利用萬能的表格
/* 傻大本粗RESET*/ *{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;} body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;} /* 代碼開始 */ ul {width: 500px;margin: 100px auto;overflow: hidden;} li {loat: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;} /* 重點 */ p {display: table;margin: 0 auto}