三个li平行显示适应屏幕宽度css
   
lan988 级别:管理员    + 关注TA 支持(0) | 反对(0)原内容


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallel Li Items</title>
<style>
  ul.container {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* 使用Flexbox布局 */
  }
 
  li {
    flex: 1; /* 每个li平均分配空间 */
    text-align: center;
    border: 1px solid #000; /* 边框仅为了可视化 */
    padding: 10px;
  }
</style>
</head>
<body>
 
<ul class="container">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
 
</body>
</html>
回到顶部顶端 回到底部底部