1.左右对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右两端布局</title> <style> .table { display: table; border: 1px solid #06c; padding: 15px; width: 100%; } .table .table-left { text-align: left; display: table-cell } .table .table-right { text-align: right; display: table-cell } .table .table-content { width: 100px; height: 100px; border: 1px solid #ccc; text-align: center; display: inline-block; font-size: 40px; line-height: 100px; } </style> </head> <body> <div class="table"> <div class="table-left"> <div class="table-content">左边</div> </div> <div class="table-right"> <div class="table-content">右边</div> </div> </div> </body> </html>
2.平均分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>平均分</title> <style> * { box-sizing: border-box; } .table { display: table; border: 1px solid #000; padding: 5px; max-width: 1000px; margin: 0 auto; width: 100%; } .table ul { display: table; width: 100%; padding: 0; border-right: 1px solid #ccc; } .table ul li { display: table-cell; border: 1px solid #ccc; text-align: center; height: 100px; border-right: none; line-height: 100px; } </style> </head> <body> <div class="table"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>