Элементы HTML расположены как относительные, затем перемещенные -15px по-прежнему занимают то же физическое пространство

Question

У меня есть серия вкладок на странице. Вкладки установлены в относительное положение. Затем они перемещаются на 15 пикселей влево. Результирующий стиль выглядит следующим образом:

style="position:relative;left:-15px"

(обратите внимание, что слева от каждой вкладки будет -15 * номер вкладки, поэтому # 2 будет -15, # 3 - -30 и т.

Это дает вкладкам приятное ощущение наложения, которое желательно. Однако недостатком является то, что при центрировании таблицы используются исходные width (без перемещения влево) вкладок. Результатом является то, что стол кажется изогнутым.

Есть ли способ настроить это поведение?

Answer 1

Вместо того, чтобы подталкивать <li> s с помощью 'position: относительный', вы можете применить это к каждой вкладке (кроме первой вкладки):

margin-left: -15px;

EDIT: Пример концепции ...

<div style="text-align:center;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</div>

Answer 2

Установить левое поле контейнера на - ((tabWidth) * (numTabs)) возможно?

Answer 3

Вы можете расположить контейнер вкладок: слева: (7,5 * номер вкладки)

Answer 4

возможно, вы могли бы добавить элемент отступа слева. ширина: # таб * 15