Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как отцентрировать ряд элементов? (https://javascript.ru/forum/xhtml-html-css/41214-kak-otcentrirovat-ryad-ehlementov.html)

danik.js 04.09.2013 15:06
Как отцентрировать ряд элементов?
 
Имеется код:
<!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) количество круглешков неизвестно

animhotep 04.09.2013 15:16 
ul{
white-space: nowrap;
margin: 0;
padding: 0;
text-align: center;
}


если не влезут появится скрол

danik.js 04.09.2013 15:22
Цитата:
Сообщение от animhotep
если не влезут появится скрол
Цитата:
Сообщение от danik.js
если не не все влазят в экран (в этом случае крайние должны обрезаться)
  

jsru_ 04.09.2013 15:34
я думаю, через js тока

animhotep 04.09.2013 15:41
Цитата:
Сообщение от danik.js
overflow div'а не менять
ну так потавь его в ul)
ul{
white-space: nowrap;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}

BETEPAH 04.09.2013 15:46
Цитата:
Сообщение от animhotep
ну так потавь его в ul)
Тогда обрежутся не крайние "круглешки", а последние

animhotep 04.09.2013 15:47
последние крайние))

danik.js 04.09.2013 16:28
Ок, на крайняк можно нарушить одно из первых двух правил. На самый край - оба правила.

BETEPAH 04.09.2013 17:19
Цитата:
Сообщение от animhotep
последние крайние))
в частном случае да, а в общем - первые тоже являются крайними ;)
Я думал, что загвоздка задачи именно в этом

danik.js 04.09.2013 17:41
Блин, нужно чтобы в центре всегда был средний шарик. Крайние левые и правые должны, если не помещаются - исчезать за экраном.


Часовой пояс GMT +3, время: 04:45.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице