html - float 和宽度的CSS

Question

我是 CSS 新手，我在这里使用一些 css，

我有这样的 html，

<ul>
 <li>
    <div class="list">Name</div>
    <div class="list">Address</div>
    <div class="list">Email</div>
    <div class="list">Ph</div>
  </li>
</ul>

css code,

li {
  width:100%;
}

.list{
  width:25%;
  float:left;
}

输出像，

   Name    Address    Email             Ph
1  abcd    abdvdh     ads@gmail.com     1233
2  pqregd  trhrgh     pqrs@gmail.com    7899
3  ytrey   xyz@gmail.com    7899

当行 Email 和 Ph 的地址字段值不可用(空白)向左移动时，问题出现在第 3 行。

如果有任何值是空的，它会占用它的宽度(25%)，我该怎么办。

Answer 1

您可能在某处读到表格是邪恶的。嗯，对于页面格式和布局，CSS 确实是首选方法。但是，您在这里看到的是一个充满数据的表格，无论您被告知什么，使用 <table>仍然是显示输出的最佳且完全可以接受的方式。当表格仍然是工作的正确标签时，不要害怕使用表格!