Интервал HTML с пунктирной линией

Вау, с чего начать? У вас есть несколько списков с заголовками над каждым, некоторые с примечаниями вверху и / или внизу, так что вам следует использовать эту разметку:

<h2>Egg Platters</h2>
<div class="note">Served With Home Fries &amp; Toast</div>
<ul>
    <li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
  (etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>

Ваш class="price" в порядке, но class="red" и <strong class="bold"> - плохой выбор - назовите класс, основываясь на том, почему он красный (например, моя «заметка»). Использование заголовков избавляет от необходимости использовать жирный шрифт для увеличения <strong> текста.

Теперь я вставил <span class="separator">, чтобы вы могли указать ширину или использовать числа с плавающей запятой, и разрешил пустому пространству разделителя расширяться, чтобы заполнить его между элементом и ценой, и вы могли стилизовать его чем-то вроде

.separator {
    border-bottom: 1px dotted #333;
}

РЕДАКТИРОВАТЬ: Я тоже согласен с комментарием ClarkeyBoy; ограничение общей ширины поможет читабельности, и ссылка TripWired показывает хороший метод (и в основном использует то, что я предлагал)

Вы думали о чем-то подобном?

http://5thirtyone.com/archives/776

Обычно я бы не предлагал таблицы ... но этот случай вполне подошел бы к столу.

Я бы отказался от пунктирных линий, так как они будут очень плохи для удобства использования (если у вас есть страница с пунктирными линиями, она очень загромождена, и вам будет трудно следить за каждой из них - вы, вероятно, будете использовать свой палец на экране, как если бы меню - не очень хорошо).

Вместо этого почему бы не использовать таблицу с альтернативными цветами строк, которая могла бы выглядеть неплохо. Затем создайте состояние ролловера, при котором будет выделена вся строка, чтобы пользователю было совершенно очевидно, сколько стоит каждый элемент.

Здесь есть отличный пример кода с кодом (см. Пример 3): http://bit.ly/9jTnAx

Код находится внизу страницы, и это в значительной степени просто скопируйте и вставьте с вашего конца.

Удачи!

Я бы использовал фон x, повторяющийся .gif на всей строке, и скрывал бы его белым цветом bg для плавающего левого имени элемента и плавающей правой ценой элемента.

.line {clear: both; нижнее поле: 15 пикселей; фон: прозрачный url (img / common / dot.gif) repeat-x scroll 0 0; высота: 22 пикс; } .label {цвет фона: #FFF; отступ справа: 2 пикселя; плыть налево; } .price {float: right; цвет фона: #FFF; отступ слева: 2 пикселя; }

<style>
    table th, td{
    border-bottom: 1px dotted #CCCCCC;
}    

HTML code block:

<h3>Current House Trends</h3>
<table class="table" border="0">
<tbody>
<tr>
    <th>Price</th>
    <td>$500,000</td>
</tr>
<tr>
    <th>Market</th>
    <td>78</td>

Если вы хотите поставить «-» между ними, вы можете добавить посередине дополнительный столбец, содержащий «-» или аналогичный по вашему выбору.