Имеется код:
<!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) количество круглешков неизвестно