Jump to content
  • 0

Центрирование ul

ShumNo

Asked by ShumNo,

 Share

Question

ShumNo Explorer

ShumNo

Posted
Posted

Подскажите, возможно ли оно

Отцентрировать список ul без указания этому списку ширины? ширина меняется

Вообще работает text-align:center; и display:inline;

Но при inline элементы становятся уже не блочными и не работают отступы вверх и вниз у ссылок внутри li

Вот так на пальцах :)

Link to comment
Share on other sites

41 answers to this question

Recommended Posts

  • 0
Scrum Explorer

Scrum

Posted
Posted
Ну зря ты так, Scrum их на padding легко меняет и у него всё отлично работает.

Да тебе все не уняться я смотрю :)

SelenIT Зачем этот джентльменский набор если можно все неплохо обыграть через inline ?

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted (edited)
Scrum их на padding легко меняет и у него всё отлично работает.

А вдруг проблемы будут в Netscape Navigator? Лучше всего использовать теги <img>, <map> и <area>. А то напридумывают разных хаков.

Добавить что-нибудь наподобие: *+html

Мне больше нравится:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>	<html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>	<html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>	<html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Edited by Serlutin
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Зачем этот джентльменский набор если можно все неплохо обыграть через inline ?

Не всё. Текст в >1 строки (напр. заголовок + подзаголовок в каждом пункте) простому инлайну неподвластен, а вот инлайн-блоку — очень даже. Ну и размеры напрямую задавать удобнее, чем колдовать с паддингами и line-height. А пробелы между тегами при inline ведут себя точно так же.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

Макс, ты своими приколами путаешь новичка.

Мне больше нравится:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>	<html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>	<html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>	<html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Жестокий ты тип.

А зачем класс no-js? Типа если открывающий тег html прописать через условный комментарий, то джс уже не подключить? Или этот класс потом предполагается убирать джсом?

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
  • Author
Posted
http://serlutin.nxt.ru/example/inline-block.html (если вдруг не обновилось, то нажмите CTRL+R или CTRL+F5)

Вот сделал то, что вам нужно. Работает в IE6.

inline-block офигенная вещь. А HasLayout уже даже хаком не считается, настолько он прочно он вошёл в нашу жизнь.

Спасибо за старания, но не все так гладко в IE8 + изменённый доктайм :)

scr-exa.png

Я понял суть мысли - вставить персональный костыль для IE7 :)

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted
Не всё. Текст в >1 строки (напр. заголовок + подзаголовок) простому инлайну неподвластен, а вот инлайн-блоку — очень даже.

Вот тут согласен. В данном случае имеет смысл и применение и использование костылей.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
+ изменённый доктайм

Такой доктайп должен гореть в аду, ибо равносилен его отсутствию. Оставьте <!DOCTYPE HTML>, от всего остального лишь путаница. Или уже копируйте целиком, со ссылкой на DTD.

А то сейчас у браузера когнитивный диссонанс: доктайп говорит ему, что страничку надо рисовать в древнем Quirks mode, а <meta http-equiv="X-UA-Compatible" content="IE=edge"> — что в наипоследнейшем, наистандартнейшем режиме. Для IE8 приоритетнее мета, а IE7 ее еще не понимает...

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
  • Author
Posted

Не важно какой доктайп - важно что оно работает, а раз оно работает, то за чем трогать? :)

без этой хрени

<meta http-equiv="X-UA-Compatible" content="IE=edge">

страница показывается не так как надо :)

но это уже другая песня

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted
IE8 + изменённый доктайм

Про IE8 я знал. Просто лень исправлять было. Но я переборол свою лень и исправил. Правда это уже вам решать, как отдельные стили для IE6 и 7 подключать. Может быть через условные комментарии, через хаки, может быть даже js. Вариантов куча.

Кстати, между margin и padding есть большое различие. margin - внешний отступ (то есть после рамки), а padding - внутренний (до рамки), поэтому и нужны инлайновые блоки.

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted
Кстати, между margin и padding есть большое различие. margin - внешний отступ (то есть после рамки), а padding - внутренний (до рамки), поэтому и нужны инлайновые блоки.

А для родительского блока не вариант я так понимаю паддинг указать ?

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted

В приведённом сейчас примере можно.

Однако. Если вдруг потом вдруг захочется на ссылки наложить картинку фоном с чётко заданными размерами. То там уже обычным inline не обойтись.

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted
Но всё равно это не вариант, постоянно подгонять паддинги. При обычных инлайнах даже ссылку блочной нормально не сделать.

Нет желания дискутировать, я вчера и так оказалось напрасно время потратил на объяснения. У каждого свой стиль и свои способности и варианты решения. У меня такой, не удовлетворяет используй другой. ага ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept