Список цен с чертой
Здравствуйте. Подскажите пожалуйста, как сверстать такую таблицу ?
Title ------------ 5000 Title long ------- 5000 Под таблицей градиентный фон, т.е фоновые накрывания не пойдут .. То есть вся проблема чтобы полоса принимала нужную длину |
Цитата:
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.price {
width: 500px;
background: url(http://habrastorage.org/storage2/4c0/00e/13e/4c000e13eb0dd2022558865ecd406b0c.png) repeat-y;
}
.price, .price .item {
display: block;
margin: 0;
padding: 0;
}
.price .item {
overflow: hidden; /*clearfix*/
}
.price .item .name {
display: block;
float: left;
max-width: 400px;
}
.price .item .cost {
display: block;
overflow: hidden; /*новый контекст форматирования*/
}
.price .item .cost .inner-1 {
display: block;
margin-right: 80px;
background: url(http://habrastorage.org/storage2/e7d/23a/52b/e7d23a52b7fa2a3534d634a8cb695f16.png) repeat-x center;
zoom: 1;
}
.price .item .cost .inner-2 {
display: block;
margin-left: 100%;
}
</style>
</head>
<body>
<ul class="price">
<li class="item">
<span class="name">Товар</span>
<span class="cost">
<span class="inner-1">
<span class="inner-2">100500</span>
</span>
</span>
</li>
<li class="item">
<span class="name">Длинное название товара</span>
<span class="cost">
<span class="inner-1">
<span class="inner-2">9000</span>
</span>
</span>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:07. |