Стиль меню "...." - заполнить точками

Question

Я пытался найти лучший способ создать эффект ".....", как в меню ужина: http://cl.ly/0g263j04322m3F140D40

Не уверен, что это нужно сделать, просто добавив всами периоды или есть ли способ иметь jQuery или CSS3 для его заполнения. Просто любопытно.

Есть идеи, что я могу сделать?Или вернуться к старому способу добавления периодов.

Answer 1

Вы можете использовать старые CSS border-style: dotted и float два элемента по обе стороны. Просто сделайте два элемента с обеих сторон непрозрачным фоном и границами, чтобы скрыть пунктирную границу. Смотрите пример здесь:

http://jsfiddle.net/7BtYC/

Примечание: CSS3 предоставляет border-image, который можно использовать для обеспечения лучшего эффекта, чем стандартная пунктирная рамка.

Answer 2

Попробуйте это решение CSS2 .

HTML:

<ul> 
    <li><span>Soup</span><span>€ 2.99</span></li>
    <li><span>Ice cream</span><span>€ 5.99</span></li>
    <li><span>Steak</span><span>€ 20.99</span></li>
</ul>

CSS:

ul {
    width: 400px;
    list-style: none;
}
li {
    border-bottom: 2px dotted black;
    height: 20px;
    margin-bottom: 6px;
}
li span {
    position: relative;
    top: 6px;
    float: left;
    clear: right;
    background: white;
    height: 26px;
}
li span+span {
    float: right;
}

Answer 3

Существует решение, использующее изображение в качестве эллипсов. Возможно, вы могли бы сделать это с помощью JavaScript, но это единственный способ CSS, о котором я могу думать. Демоверсия здесь .

Что вам нужно сделать, это дать элементу контейнера повторяющийся фон из точек, и тогда любой элемент поверх него будет иметь непрозрачный фон; это скроет точки, давая наполовину приличный эффект. Эксперименты - это ключ.

Код следующий:

HTML

<div>
    <strong>Big plate o' food</strong><span>1 million money</span>
</div>

CSS

div
{
    background: url('http://media.avclub.com/images/auth/user/57461/ellipsis_png_35x42_crop_q85.jpg') repeat-x;
}

strong, span
{
    background: white;
}

span
{
    float: right;
}

Обратите внимание, что я использовал действительно дрянное изображение для эллипсов; Вы можете сделать лучше.