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

当电子邮件和电子邮件行的地址字段值不可用（空白）向左移动时，第3行出现问题。

如果任何值为空，我该怎么做才占据它的宽度（25％）。

Answer 1

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

Answer 2

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

使用此样式。这里不需要数据。 div列表没有分配高度。这就是它发生的原因。 min-height应该是一个大于0的值。

Answer 3

您需要将min-height设置为列表类。

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

选中此http://jsfiddle.net/2XeMX/

Answer 4

Working DEMO

当数据为空时，您需要做的就是设置 。看到我分享的例子，你会有更好的想法。

Answer 5

以下是fiddle link

<强> 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>

浮点数和宽度css

5 个答案: