1

我是 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 行的地址字段值不可用（空白）向左移动时，问题出现在第 3 行。

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

4

5 回答 5

4

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

于 2013-08-19T10:38:29.857 回答
2

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

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

检查这个http://jsfiddle.net/2XeMX/

于 2013-08-19T10:50:20.797 回答
2 
.list{
  width:25%;
  float:left;
  min-height: 1px;
}

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

于 2013-08-19T10:43:52.157 回答
0

工作演示

您需要做的就是&nbsp;在数据为空时进行设置。看看我分享的例子，你会有更好的主意。

于 2013-08-19T10:37:56.963 回答
0

这是小提琴链接

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>
于 2013-08-19T10:40:02.703 回答