在cfloop標籤內的div標籤引入了不需要的換行符

Question

我在ColdFusion中有一個網頁，它顯示來自SQL表的內容。內容使用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標籤。

請讓我知道我要去哪裏錯了。

歡呼聲

Answer 1

h4在它後面有一個隱式換行符，以及p。您可以使用CSS樣式的顯示器：inline-table for h4，或者使用跨度並應用類似於您希望的h4樣式的類。

Answer 2

如果你想保持當前的標籤結構，你可以將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僞類

Answer 3

除了對方是什麼回答說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可能是首選。

Answer 4

使用表格，更容易控制使用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>