Question

我有3 <p>设置宽度，但偶尔我内部没有内容，但我需要它们保持宽度，即使<p>内没有内容。

<div class="grid_12 alpha omega directory-phone-table-row">
        <p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}</a></p>
        <p class="grid_3 alpha omega">${phonework}</p>
        <p class="grid_3 alpha omega">${departmentName}</p>
    </div>

.directory-phone-table .directory-phone-table-data p{
    color: #000;
    font-size: 12px;
    float: left;
    width: 220px;
    overflow: hidden;   
}

Answer 1

根据W3C spec，用户代理应该忽略空的p元素。因此，不应该为空的p元素设置样式。来自规范：

我们不鼓励作者使用空P元素。用户代理应该忽略空P元素。

在您的情况下，您可以使用div或span元素代替p，这样即使它是空的，也可以设置样式。

如果您出于某种原因仍想使用p - 元素，则可以通过添加 作为内容来“欺骗”浏览器，但这似乎是一个有点难看的解决方案。我宁愿换成更合适的标签。

Answer 2

我不认为在内部没有内容时可以定义块元素的宽度。至少，从我的经验来看。我通常做的是将空格放在您可能期望空值的位置（更好的是，使用空格的html代码： ）。如果你有办法返回一个空格字符，如果数据什么也没有返回 - 去那条路线，否则你可以在变量的末尾添加一个空格，如下所示：

<p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}&nbsp;</a></p>
<p class="grid_3 alpha omega">${phonework}&nbsp;</p>
<p class="grid_3 alpha omega">${departmentName}&nbsp;</p>

Answer 3

使用您当前的示例，您的CSS选择器不会定位您提供的HTML中的

标记。您在CSS中指定了.directory-phone-table .directory-phone-table-data，但

位于directory-phone-table-row

如果你只是使用.directory-phone-table-row p，你应该好好去

Answer 4

您可以使用 代替空

Answer 5

你可以添加一个与背景颜色相同的边框，虽然这真的很难看。您也可以使用display：inline-block代替浮点数，如下所示：

.directory-phone-table .directory-phone-table-data p{
  display: inline-block;
  color: #000;
  font-size: 12px;
  width: 220px;
  overflow: hidden;  
}

这在IE6中不起作用

当没有内容时，Float Div保持其宽度

5 个答案: