Почему не работает display inline block
Перейти к содержимому

Почему не работает display inline block

  • автор:

Что делать, если не работает inline-block?

61751a70cf157983763972.png

Результат:

Здесь я хотел, чтобы History, Culture и Language были в одну линию.

  • Вопрос задан более двух лет назад
  • 248 просмотров

1 комментарий

Простой 1 комментарий

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
Не помещается. У вас body ограничен шириной 320пикс.
Решения вопроса 1

iiiBird

iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
ты уже использовал flex для header. что тебе мешает использовать его и на навигацию?
header .mnu_top
Ответ написан более двух лет назад
Нравится 1 4 комментария
Samrux @Samrux Автор вопроса

Это, конечно, помогло поставить в ряд, но не подскажите ли ещё, что делать с линией, она должна быть до правого края.

iiiBird

iBird Rose @iiiBird Куратор тега CSS
Samrux, ну ты сам ограничил body стилем max-width: 320px;
Samrux @Samrux Автор вопроса
iBird Rose, Да, однако там 20px, а не 320.

iiiBird

iBird Rose @iiiBird Куратор тега CSS
Samrux, убери этот стиль

body

линия будет до правого края
Ответы на вопрос 1

Pavel-ww

Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.

Или вместо всех этих inline для li просто воспользоваться современными технологиями

.mnu_top

Или вот так, что будет надежнее для старых IOS

.mnu_top

И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.

И совет — вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода

Р ешение inline-block

Одним из самых интересных свойств в CSS является inline-block . Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align , с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами.

Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:

  1. display:inline-block в IE срабатывает только для изначально строчных элементов, вроде A , SPAN и прочих. При этом возможности обойти это, насколько мне известно, нет — век живи, век учись — если сначала у блока, пускай и блочного, стоит display:inline-block , а позже только для IE мы пропишем display:inline всё волшебным образом заработает.
  2. display:inline-block никак не работает в FireFox версий ниже 3-ей. Однако, есть один обходной путь.

Тогда, как Fx2 простой inline-block не понимает, существует проприетарное лисье свойство display:-moz-inline-box . К сожалению, это не полноценное решение проблемы, а костыль, имеющий множество ограничений по использованию, но на безрыбье и оно сгодится, если использовать его аккуратно.

Под аккуратностью я понимаю следующие моменты:

  • Для минимизации глюков поведения -moz-inline-box желательно внутрь такого элемента вставить дополнительный строковый элемент с display:block . Однако, в этом случае необходимо добавить float:left для IE, иначе он будет растягивать такой элемент на всю возможную (для безграничных возможностей ие) ширину.
  • Если нужно задавать фиксированные размеры для элемента inline-block , лучше задавать его и для самого элемента, и для внутреннего элемента (во избежание некоторых проблем).
  • Поведение -moz-inline-box местами непредсказуемое, поэтому во время разработки нужно чаще тестировать поведение таких элементов в Fx2, однако внутренние элементы уже будут обретать привычные черты.
  • Т.к. в Fx3 нормальное поведение inline-block уже реализовано, подключать решение нужно примерно так: display:-moz-inline-box; display:inline-block; , вторая лиса увидит только свою проприетарщину, а третья — заметит и стандартное значение, которое и применит.
  • К сожалению, применяя к подобным элементам vertical-align , очень сложно добиться одинакового выравнивания во всех браузерах.

P.S.: Следует упомянуть, что существует элемент, который практически во всех браузерах ведет себя как inline-block элемент почти безукоризненно. Это тег button . Правда, минусов у реализации inline-block при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Почему не работает display inline block

вот display:inline и не работает. div всегда отображается как display: block

p.s
если, к примеру, добавить к icontent еще padding: 30px 30px;
то вообще весело, IE и FF отображают их по разному.
IE следует пункту 8.6 The box model for inline elements in bidirection context в CSS 2.1
а вот FF кладет на это.

да цвет фона у second block div почему то разный что у IE, что у FF

Re: почему не работает display: inline ?

От: c-smile http://terrainformatica.com
Дата: 15.11.07 17:52
Оценка:

Здравствуйте, 8bit, Вы писали:

8>

8> 8> 8> 8>blah-blah-blah blah blah blah 8>
block div 8>
inline div 8>
second block div
8>still inline div
8>still block div
8>blah-blah-blah blah blah blah 8> 8> 8>

8>вот display:inline и не работает. div всегда отображается как display: block

Re[2]: почему не работает display: inline ?

От: 8bit
Дата: 15.11.07 17:55
Оценка:

Здравствуйте, c-smile, Вы писали:

CS>Какой из трех?

, для которого в стиле указано display: inline;

Re[3]: почему не работает display: inline ?

От: c-smile http://terrainformatica.com
Дата: 16.11.07 00:09
Оценка:

Здравствуйте, 8bit, Вы писали:

8>Здравствуйте, c-smile, Вы писали:

CS>>Какой из трех?

8>, для которого в стиле указано display: inline;

Следующий вопрос: это вопрос про htmlayout или про IE или про FF?

Re[4]: почему не работает display: inline ?

От: 8bit
Дата: 16.11.07 01:12
Оценка:

Здравствуйте, c-smile, Вы писали:

CS>Следующий вопрос: это вопрос про htmlayout или про IE или про FF?

Я вроде бы вполне ясно задал вопрос :

В форуме «HTMLayout» — почему не работает display: inline?.
Значит вопрос по HTMLayout.
(К тому же в IE и FF display: inline работает, хоть и с различиями )

Попутно я написал про поведение IE и FF,
потому что сначала проверил на них для подстраховки
и увидел такую неоднозначность, о чем и написал, причем под P.S.
и без единого знака вопроса, хоть и со злым умыслом ,
надеясь услышать комментарий по данному поводу от человека,
который в этом «собаку съел».

Re[5]: почему не работает display: inline ?

От: c-smile http://terrainformatica.com
Дата: 16.11.07 01:46
Оценка: 4 (1)

Здравствуйте, 8bit, Вы писали:

8>Попутно я написал про поведение IE и FF,
8>потому что сначала проверил на них для подстраховки
8>и увидел такую неоднозначность, о чем и написал, причем под P.S.
8>и без единого знака вопроса, хоть и со злым умыслом ,
8>надеясь услышать комментарий по данному поводу от человека,
8>который в этом «собаку съел».

Бывает что в этот форум заносит сообщения про «просто HTML», извняюсь, попутал.

div в htmlayout не может содержать inline элементы напрямую. Т.е. div считает что все его children не inline. На это кстати есть рекомендация w3c.
T.е. inline div есть nonsense.

Для того чтобы твой фрагмент работал нужно так:

blah-blah-blah blah blah blah 
block div inline element inline block element still inline element still block div
blah-blah-blah blah blah blah
span.inline < display:inline; /* that is true by default */ border:3px solid blue; >span.iblock

И вообще конструкция

смысла для layout не имеет ибо не ясно как размещать этот

имеет смысл ибо говорит: разложи буквы и промеж них положи как будто оно такая буква.
Re[6]: почему не работает display: inline ?

От: 8bit
Дата: 07.12.07 07:37
Оценка:

Здравствуйте, c-smile, Вы писали:

CS>И вообще конструкция
CS>

CS> . . . CS>

CS>смысла для layout не имеет ибо не ясно как размещать этот

Это почему же? Если следовать такой логики тогда в конструкции типа:

123qwe

456asd

789zxc

тоже не ясно как размещать второй div, но это же не так
По сути это будет представлено как:

123qwe

456asd

789zxc

И по сути можно заменить на , как в твоем примере.

Re[7]: почему не работает display: inline ?

От: ShaggyOwl http://www.rsdn.org
Дата: 07.12.07 08:51
Оценка:

Здравствуйте, 8bit, Вы писали:

8>Это почему же?
Причины такого поведения Андрей подробно объяснял здесь http://www.rsdn.ru/forum/message/2630964.aspx

Автор: c-smile
Дата: 23.08.07

8>Если следовать такой логики тогда в конструкции типа:
8>

123qwe

456asd

789zxc

8>тоже не ясно как размещать второй div, но это же не так
8>По сути это будет представлено как:

8> 8>123qwe 8> 8>456asd 8> 8>789zxc 8>
 123qwe 456asd  789zxc 

Хорошо там, где мы есть! 🙂
Re[7]: почему не работает display: inline ?

От: c-smile http://terrainformatica.com
Дата: 07.12.07 17:32
Оценка:

Здравствуйте, 8bit, Вы писали:

8>Здравствуйте, c-smile, Вы писали:

CS>>И вообще конструкция
CS>>

CS>> . . . CS>>

CS>>смысла для layout не имеет ибо не ясно как размещать этот

8>Это почему же? Если следовать такой логики тогда в конструкции типа.

Предложи способ отображения вот этого:

One two three

four five

six

(это запрещенная конструкция, но тем не менне)

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Zero or more style elements, followed by either zero or more block-level elements, or inline-level content (but not both).

Re[8]: почему не работает display: inline ?

От: 8bit
Дата: 07.12.07 17:57
Оценка:

Здравствуйте, ShaggyOwl, Вы писали:

SO>Чуть по другому:
SO>

SO> SO> 123qwe SO> SO> 456asd SO> SO> 789zxc SO> SO>

да-да, но это не суть. inline тоже можно так разорвать.

Re[8]: почему не работает display: inline ?

От: 8bit
Дата: 07.12.07 18:20
Оценка:

Здравствуйте, c-smile, Вы писали:

CS>Предложи способ отображения вот этого:
CS>

CS>

One two three

four five

six

CS>

CS>(это запрещенная конструкция, но тем не менне)

Но для этого нужно что бы движок умел разрывать inline и потом продолжать его заново.
практически так же как и анонимные, только нужно, к примеру, ставить еще дополнительные флажки,
к какой части относится данный кусок от inline (самый первый, середина, самый последний),
так как для inline нужно учитывать горизонтальные margins, padding в его начале и конце.

CS>Кстати html5 вообще строг на эту тему.
CS>http://www.whatwg.org/specs/web-apps/current-work/#div
CS>

CS>3.20.2. The div element
CS>Block-level element.
CS>Contexts in which this element may be used:
CS> Where block-level elements are expected.
CS>Content model:
CS> Zero or more style elements, followed by either zero or more block-level elements, or inline-level content (but not both).

хм. получается чтобы было так:
придется делать:
Re[9]: почему не работает display: inline ?

От: c-smile http://terrainformatica.com
Дата: 07.12.07 20:32
Оценка:

Здравствуйте, 8bit, Вы писали:

8>Здравствуйте, c-smile, Вы писали:

CS>>Предложи способ отображения вот этого:
CS>>

CS>>

One two three

four five

six

CS>>

CS>>(это запрещенная конструкция, но тем не менне)

8>а что тут изменилось собственно? отображать в соответствии со стилем.
.
8>Но для этого нужно что бы движок умел разрывать inline и потом продолжать его заново.
8>практически так же как и анонимные, только нужно, к примеру, ставить еще дополнительные флажки,
8>к какой части относится данный кусок от inline (самый первый, середина, самый последний),
8>так как для inline нужно учитывать горизонтальные margins, padding в его начале и конце.

Так оно и происходит в реалии. Загрузи

One two three

four five

six

в, скажем, Mozilla и посмотри DOM explorer. Ты увидишь три

элемента плюс к ним три .
То же самое и в случае:

One two three

four five

six

8>хм. получается чтобы было так:
8>придется делать:

В этом есть сермяжный смысл — а.к.а жизненная необходимость.

Не работает display:inline block

Дратути))0)
Такая проблема.Не могу понять в чем дело.По справаот картинки должнен быть текст.По чему-то не пашет display:inline block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
article class="post-list"> div class="post-list-item"> div class="post-list-item-image">/div> div class="post-list-item-text"> div class="post-list-item-head"> h2>a>WHAT IS LOVE ?/a>/h2> div class="infocont" >span>September 21/2016/span>/div> div class="post-list-item-content"> p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. /p> /div> /div> /div> /div> /article>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
.post-list{ float:left; position:relative; width:100%; } .post-list-item{ width:100%; position:relative; } .post-list-item-head h2{ font-size:14px; } .infocont{font-size:12px;} .post-list-item-image{ width: 250px; height:200px; display: inline-block; position: relative; background: center center no-repeat; background-size: cover; background-image: url('http://s011.***********/i316/1207/72/cdc05823f3c4.jpg'); } .post-list-item-text{ position:relative; display:inline-block; vertical-align: top; padding:0; margin:0; }

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *