Добавление пунктирной линии после описания меню - PullRequest
Новая
       11

Добавление пунктирной линии после описания меню

3 голосов
/ 02 марта 2010

Как мне добавить динамическое ".........." в меню ресторана в CSS? Как и в печатных, у них есть целое "наша еда сделана из бла-бла-бла ............. $ 24,99."

Как бы вы сделали это в CSS? Или это вообще возможно?

Ответы [ 4 ]

4 голосов
/ 02 марта 2010

Лучшее решение это: 

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

затем CSS для сопоставления (не проверено, но настраивается для получения эффекта) 

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food, .price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

Таким образом, он в основном фиксирует прямоугольник LI и рисует границу внизу, затем цена и название продукта динамически покрывают его шириной. YMMV с браузерами, но, возможно, отрицательное поле margin-bottom заставит li border-bottom наверняка быть скрытыми элементами P.

2 голосов
/ 21 августа 2013

Ответ Алекса имеет один существенный недостаток - многострочный текст в .food скрывает нижнюю строку.

Также есть старый добрый ответ: http://www.search -this.com / 2007/11/26 / css-a-recipe-for-success / ( demo )

Вот демонстрационная версия немного измененного старого решения (попробуйте изменить размер): http://cssdesk.com/BqR96

И модифицированный CSS: 

.restaurant_menu__list {      
  min-width: 320px; /* For mobile devices */
  max-width: 500px; /* Custom max width for readbility */
}

.restaurant_menu__row {
  border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
  position: relative;
  float: left;
  line-height: 1.2em;  

  margin: -.9em 0 0 0;  
  width: 100%;

  text-align: left;  
}

.restaurant_menu__meal span
, .restaurant_menu__price
{
  background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}

.restaurant_menu__meal {
  padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}

.restaurant_menu__meal span {
  margin:0;
    position:relative;
    top: 1.6em;
    padding-right:5px; /* Custom number for space between text and dotted line */
}

.restaurant_menu__price {  
    padding:1px 0 1px 5px;
    position:relative;
    top:.4em;
    left:1px;/* ie6 rounding error*/
    float:right;
}

И модифицированный HTML: 

<ul class="restaurant_menu__list">

  <li class="restaurant_menu__row">
    <!-- Inside div we need inline element, to handle multiline meals -->
    <div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
    <span class="restaurant_menu__price">€25</span>
  </li>

  <li class="restaurant_menu__row">
    <div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
    <span class="restaurant_menu__price">€32</span>
  </li>

</ul>
2 голосов
/ 02 марта 2010

Возможно, но не очень хорошо поддерживается. Вам нужен псевдо-селектор :after и правило content. Смотрите здесь: http://www.quirksmode.org/css/beforeafter.html Обратите внимание, что IE получает большой жирный F для реализации.

Вы можете сделать это в JavaScript. Или путем творческого использования типа границы «пунктир». Или, может быть, повторяющийся фон, как предлагает Брукс, который сработал бы, если бы вы указали диапазон цен и описаний, к которому вы применяете цвет фона для покрытия повторяющегося фона.

Обновление Как это может выглядеть: 

<ul class="menu">
  <li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>

С помощью CSS, например: 

.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
  display:block;
  overflow:hidden; //contain the float
  background-image: url(dots.gif);
  background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }
0 голосов
/ 02 марта 2010

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

...