Как отцентрировать ряд элементов?
Имеется код:
<!DOCTYPE html>
<style>
div{
border: 1px solid red;
padding: 10px 0;
}
ul{
white-space: nowrap;
margin: 0;
padding: 0;
}
li{
display: inline-block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
vertical-align: middle;;
border-radius: 100%;
background: blue;
}
</style>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Поиграться можно тут: http://jsfiddle.net/danya_postfactum/tT6cS/ Нужно чтобы круглешки центрировались, даже если не не все влазят в экран (в этом случае крайние должны обрезаться). При этом: 1) overflow div'а не менять 2) новых элементов не добавлять. 3) количество круглешков неизвестно |
ul{
white-space: nowrap;
margin: 0;
padding: 0;
text-align: center;
}
если не влезут появится скрол |
Цитата:
Цитата:
|
я думаю, через js тока
|
Цитата:
ul{
white-space: nowrap;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
|
Цитата:
|
последние крайние))
|
Ок, на крайняк можно нарушить одно из первых двух правил. На самый край - оба правила.
|
Цитата:
Я думал, что загвоздка задачи именно в этом |
Блин, нужно чтобы в центре всегда был средний шарик. Крайние левые и правые должны, если не помещаются - исчезать за экраном.
|
Цитата:
сделать отрицательный маржин для внутреннего блока. http://jsfiddle.net/BETEPAH/tT6cS/14/ |
BETEPAH, ну я к такому же варианту и пришел, еще до создания темы. Задать ширину заведомо большую, чем общая ширина элементов (тут конечно же третий пункт условий не совсем соблюдается), и впринципе будет работать. Хотелось найти решение покрасивей.
|
Хотя не, твой вариант получше.
|
Вот такой вариант с таблицей получился:
http://jsfiddle.net/BETEPAH/LgYHS/ Правда на первые два правила пришлось забить :( |
danik.js,
может скриптом да и не мучатся ? http://learn.javascript.ru/play/0905r |
рони, о да, ради такой хренотени еще и jQuery цеплять. Просто замечательно :)
|
danik.js,
таблицей не понравилось? |
| Часовой пояс GMT +3, время: 05:42. |