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

我在ColdFusion中有一个网页，它显示来自SQL表的内容。内容使用cfloop进行迭代，并使用div块进行渲染。我的代码片段如下 -在cfloop标签内的div标签引入了不需要的换行符

<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标签。

请让我知道我要去哪里错了。

欢呼声

来源

2009-06-04 Arnkrishn

h4在它后面有一个隐式换行符，以及p。您可以使用CSS样式的显示器：inline-table for h4，或者使用跨度并应用类似于您希望的h4样式的类。

来源

2009-06-04 20:00:49

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

.subBlock .item p {float：left; }

我个人倒重组标签这样的：

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

然后申请一个风格跨度.title伪类

来源

2009-06-04 21:49:29

除了对方是什么回答说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可能是首选。

来源

2009-06-04 23:43:42

-1

使用表格，更容易控制使用div，p和h4标签的布局和外观。当我使用div时，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>

来源

2009-06-05 14:40:23 Rich

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

回答

相关问题