Тег div внутри тега cfloop вводит нежелательные разрывы строк

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 на другой странице, и там он отображается правильно. Единственная разница здесь в том, что я использую тег div внутри тега cfloop.

Пожалуйста, дайте мне знать, где я иду не так.

ура

Answer 1

h4 имеет неявный разрыв строки после него, а также p. Вы можете либо использовать стиль отображения CSS: встроенную таблицу для h4, либо использовать span и применить класс, который делает его похожим на желаемый стиль h4.

Answer 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;
}

(вероятно, нуждается в настройке)

В качестве альтернативы, предпочтительным может быть обычный ul / li с span class="title".

Answer 3

использовать таблицу, намного проще управлять макетом и внешним видом, чем с помощью тегов div, p и h4. divs особенно может иногда делать странные вещи, когда я их использую.

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

Answer 4

Если вы хотите сохранить текущую структуру тегов, вы можете использовать теги 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>

затем примените стиль для класса span .title