Плаване наляво, подравняване на текста в центъра ИЛИ показване в ред, но прекъсване на реда?

Имам навигация в ONE UL

Тези единични списъци трябва да са на два реда на определен li

трябва да бъде визуално центриран.

Обикновено поставям това в две отделни UL и използвам централно подравняване на текста в LI, но не мога да стигна до HTML.

Опитах се да преместя линията наляво и да използвам clear :left в LI, който исках да прекъсна, но централното подравняване на текста вече не работи. Бих могъл да сложа леви полета на първия li и li, където искам прекъсването, за да фалшифицира подравняването на текста, но уебсайтът е ликвидиран, така че ширината трябва да се промени.

Това е почти като да използвам блок за показване - или да прекъсна тук, но да позволя на следващия ред да бъде вграден с него.

Мислех си, че може би мога да използвам генерирано съдържание и BR за нещо, но трябва да работи поне в ie7.

Някакви идеи??

Благодаря предварително.


css css-float
person user1010892    schedule 12.03.2012    source източник
comment
Не съм сигурен дали разбирам въпроса ви или не. опитахте ли display: inline-block; Ако съм прочел погрешно, бихте ли могли да публикувате кода, който имате в момента, и може би мога да видя проблема малко по-добре.   -  person Andrew    schedule 12.03.2012
comment
публикувайте своя код за по-добро разбиране   -  person sandeep    schedule 12.03.2012
comment
Съжалявам, ако това не е било много ясно. Мисля, че наистина го разработих. Опитах се да дам отговора, както и да изясня въпроса си, но трябва да изчакам повече, тъй като нямам достатъчно точки!! Ще пиша по-късно, ако някой се интересува. - Благодаря   -  person user1010892    schedule 12.03.2012

Отговори (1)


arrow_upward
0
arrow_downward

Мисля, че го разработих. Съжалявам, че въпросът ми не беше ясен - ще се опитам да изясня и след това да покажа как съм го поправил.

Да кажем, че имам списък:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

Искам това да се показва хоризонтално, но на два реда - малко като два ul с lis, настроен на display:inline. Като този:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

НО не мога да редактирам HTML.

Доста лесно чрез преместване наляво на всички елементи от списъка, но добавяне на clear:left към елемент 4.

Проблемът ми беше, че листовете също бяха настроени на text-align:center и чрез плаващо ляво те подравняваха ляво. Можех да добавя полета към 1-ви и 4-ти елемент, но оформлението е течно, така че няма да работи.

В крайна сметка запазих всички лисове като display:inline, но добавих "white-space:pre" към елемент 3. Това означаваше, че елемент 4 визуално започва нов списък отдолу, но и двата списъка все още са подравнени централно.

След това се сблъсках с друг проблем, че разликата между тези 2 списъка беше доста голяма - размерът на прекъсването на реда беше голям, така че намалих наполовина височината на реда и всичко работи добре.

не проверих IE6, но проверих ie‹9 FF и chrome на компютър. Трябва да проверите сафари.

Надявам се това да помогне на някого!

person user1010892    schedule 13.03.2012