Jump to content
  • 0

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


ShumNo
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

Recommended Posts

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

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

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

Link to comment
Share on other sites

  • 0
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
Зачем этот джентльменский набор если можно все неплохо обыграть через inline ?

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

Link to comment
Share on other sites

  • 0

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

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

<!--[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
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
Не всё. Текст в >1 строки (напр. заголовок + подзаголовок) простому инлайну неподвластен, а вот инлайн-блоку — очень даже.

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • 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