浮动和宽度的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

当行“电子邮件”和“ Ph”的“地址”字段值不可用（空白）移到左侧时，在第三行中发生了问题。

如果有任何值是空的，我该怎么办，占用其宽度（25％）。

Answer 1

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

Answer 2

.list{
  width:25%;
  float:left;
  min-height: 1px;
}

使用这种风格。 这里不需要数据。 没有为div列表分配高度。 这就是它发生的原因。 最小高度应为大于0的值。

Answer 3

您需要将最小高度设置为列表类。

.list{
  width:25%;
  float:left;
  min-height: 10px; // Set the value as per your need, but not zero
}

检查此http://jsfiddle.net/2XeMX/

Answer 4

工作演示

您所需要做的就是设置  当数据为空时。 查看我分享的示例，您将有更好的主意。

Answer 5

这是小提琴链接

的CSS

*{padding:0;margin:0;}
li {
  width:100%;
  display: table;
}

.list{
  width:25%;
 /* float:left;*/
  display: table-cell;
}

的HTML

<ul>
 <li>
    <div class="list">Name</div>
    <div class="list">Address</div>
    <div class="list">Email</div>
    <div class="list">Ph</div>
  </li>
  <li>
    <div class="list">abcd</div>
    <div class="list">abdvdh</div>
    <div class="list">ads@gmail.com</div>
    <div class="list">1233</div>
  </li>
  <li>
    <div class="list">pqregd</div>
    <div class="list">trhrgh</div>
    <div class="list">pqrs@gmail.com</div>
    <div class="list">7899</div>
  </li>
  <li>
    <div class="list">ytrey</div>
    <div class="list"></div>
    <div class="list">xyz@gmail.com</div>
    <div class="list">7899</div>
  </li>
</ul>