cfloop 标签内的 div 标签引入了不需要的换行符答案

【问题标题】：div tag inside a cfloop tag introduces unwanted line breakscfloop 标签内的 div 标签引入了不需要的换行符
【发布时间】：2012-01-30 01:23:26
【问题描述】：

我在 ColdFusion 中有一个网页，它显示 SQL 表中的内容。内容使用 cfloop 进行迭代，并使用 div 块呈现。我的代码 sn-p 如下-

<cfloop query="qry1">
<div class="subBlock">
    <div class="item"><h4>Date:</h4><p>#qry1.date#</p></div>
    <div class="item"><h4>Name:</h4><p>#qry1.name#</p></div>
    <div class="item"><h4>Address:</h4><p>#qry1.address#</p></div>
</div>
</cfloop>

页面上显示的内容看起来像-

Date:

06/01/2009 03:40 PM

Name:

XYZ ABC

Address:

ZZZ St.

所以问题是我得到了那些换行符。而我想要的是这样的-

Date:06/01/2009 03:40 PM

Name:XYZ ABC

Address:ZZZ St.

我在另一个页面上使用了类似的 div，它在那里正确显示。这里唯一的区别是我在 cfloop 标签中使用了 div 标签。

请告诉我哪里出错了。

干杯

【问题讨论】：

标签： html css coldfusion

【解决方案1】：

h4 后面有一个隐式换行符，p 也一样。您可以使用 CSS 样式的 display: inline-table 用于 h4，或者使用 span 并应用一个类，使其看起来像您想要的 h4 样式。

【讨论】：

【解决方案2】：

除了其他答案关于 h4 和 p 具有默认块级样式的内容外，标题通常用于文档部分，而不是用于标记特定信息。

考虑使用定义列表，它（可以说）在语义上更正确：

<cfloop query="qry1">
    <dl class="party_details">
        <dt>Date:</dt><dd>#qry1.date#</dd>
        <dt>Name:</dt><dd>#qry1.name#</dd>
        <dt>Address:</dt><dd>#qry1.address#</dd>
    </dl>
</cfloop>

然后一些CSS类似于：

dl.party_details dt
{
    float:left;
    clear:left;
    font-weight: bold;
}

dl.party_details dd
{
    float:left;
    clear:none;
}

（可能需要调整）

或者，可能首选带有span class="title" 的常规 ul/li。

【讨论】：

【解决方案3】：

如果您想保留当前的标签结构，您可以在 CSS 中浮动 P 标签。类似（未经测试）：

.subBlock .item p { 浮动：左； }

我个人会将标签重组为：

<div class="subBlock">
    <div class="item"><p><strong>Date: </strong>#qry1.date#</p></div>
    ...
    ...
</div>

或

<div class="subBlock">
    <div class="item"><p><span class="title">Date: </span>#qry1.date#</p></div>
    ...
    ...
</div>

然后为 span .title 类应用样式

【讨论】：

【解决方案4】：

使用表格，比使用 div、p 和 h4 标签更容易控制布局和外观。尤其是当我使用 div 时，它们有时会做一些奇怪的事情。

<table>
<cfloop query="qry1">
<tr>
  <td class="item">Date: #qry1.date#</td>
</tr>
<tr>
  <td class="item">Name: #qry1.name#</td>
</tr>
<tr>
  <td class="item">Address #qry1.address#</td>
</tr>
</cfloop>
</table>

【讨论】：