Пунктирная линия HTML Span - PullRequest
Новая
       57

Пунктирная линия HTML Span

4 голосов
/ 13 октября 2010

У меня есть меню, закодированное здесь в формате html, но мне нужна пунктирная линия для обозначения имен и цен. Как мне поступить здесь? Я немного потерян, ха-ха.

Вы можете увидеть это здесь.

http://mystycs.com/menu/menuiframe.htm

Я знаю, что могу использовать css для этого, но как мне добраться до него, промежуток между этими двумя.

Спасибо =)

Ответы [ 6 ]

7 голосов
/ 13 октября 2010 
<style type="text/css">
 .menugroup{
    width:100%;
 }    


 .itemlist{
        list-style-type: none;
 }

 .seperator{
        margin: 5px; 
        width:50%; 
        border-bottom: 1px dotted #000
 }

</style>


<div class="menugroup">

   <ul class="itemlist">
      <li>item name<span class="seperator"></span>price</li>
   </ul>

</div>
3 голосов
/ 13 октября 2010

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

<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 показывает хороший метод (и, по сути, использует то, что я предлагал)

2 голосов
/ 13 октября 2010

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

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

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

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

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

Удачи!

2 голосов
/ 13 октября 2010

Рассматривали ли вы что-то подобное?

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

1 голос
/ 15 апреля 2011

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

.Строка { ясно: то и другое; край дно: 15px; фон: прозрачный URL (img / common / dot.gif) repeat-x scroll 0 0; высота: 22px; } .этикетка{ цвет фона: #FFF; обивка-направо: 2px; плыть налево; } .цена{ плавать: право; цвет фона: #FFF; обивка налево: 2px; }

0 голосов
/ 20 октября 2012 
<style>
    table th, td{
    border-bottom: 1px dotted #CCCCCC;
}

Блок HTML кода: 

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

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

...