Выравнивание inline-block по ширине в Chrome и Opera

htmlhtml · November 28, 2013

В Chrome и Opera не работает text-align: justify, если на странице есть форма и стили при этом находятся во внешнем файле (jsfiddle не подходит). Нормально выравниваются те элементы, стиль которых определен прямо в HTML-коде с помощью атрибуте style. Если удалить селекты или форму целиком - все работает нормально.

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="style.css"></head><body>    <form action="action">        <fieldset>            <input type="text" name="id00" id="id01">            <select name="id02" id="id03">                <option value="1">1</option>            </select>            <select name="id04" id="id05">                <option value="1">1</option>            </select>        </fieldset>    </form>    <div class="parent">        <div class="child">1</div>        <div class="child">2</div>        <div class="child" style="display: inline-block">3</div>        <div class="child" style="display: inline-block">4</div>    </div></body></html>

.parent {    width: 500px;    text-align: justify;    }.parent:after {    display: inline-block;    visibility: hidden;    overflow: hidden;    width: 100%;    height: 0px;    content: "";    }    .child {        display: inline-block;        margin-bottom: 10px;        width: 220px;        background: orange;        }

Z1gnet · November 28, 2013

не знаю как у вас, а у меня в хроме все работает http://codepen.io/anon/pen/EsAxK

htmlhtml · November 28, 2013

не знаю как у вас, а у меня в хроме все работает http://codepen.io/anon/pen/EsAxK

Стили должны находится во внешнем файле. На странице по ссылке они находятся в <style> внутри <iframe>

Z1gnet · November 28, 2013

http://prntscr.com/277j3d пожалуйста, подключил отдельно. видимо вы что то не так прописали. проверте код

htmlhtml · November 28, 2013

http://prntscr.com/277j3d пожалуйста, подключил отдельно. видимо вы что то не так прописали. проверте код

http://savepic.ru/4907030.jpg очищал кэш браузера, смотрел страницу на другом компе. Отправлял файлы другим людям - та же проблема. Сохранял файлы в Sublime Text 2 с кодировкой UTF-8.

http://savepic.ru/4896808.jpg

Edited November 28, 2013 by htmlhtml

Z1gnet · November 28, 2013

скиньте пожалуйста свой код архивчиком. поглядим что там не так

htmlhtml · November 28, 2013

http://rghost.ru/50504070

htmlhtml · November 28, 2013

скиньте пожалуйста свой код архивчиком. поглядим что там не так

По-прежнему все работает?

Z1gnet · November 28, 2013

интересное кино получается. неведомая фигня ))) не знаю природу этого бага, но нашел способ как пофиксить. хром упорно просит что бы после подключения цсс подключали js, даже если у нас его нету. не знаю с чем это связано, но так оно и есть... впервые с таким сталкиваюсь. как бы там ни было если у вас нету джаваскриптов то просто вставте после подключения цсс такой код <script> </script> обязательно с пробелом! при чем можно вставлять где угодно, хоть перед закрывающимся body. если у кого есть объяснение сему поведению, буду рад услышать))

htmlhtml · November 28, 2013

интересное кино получается. неведомая фигня ))) не знаю природу этого бага, но нашел способ как пофиксить. хром упорно просит что бы после подключения цсс подключали js, даже если у нас его нету. не знаю с чем это связано, но так оно и есть... впервые с таким сталкиваюсь. как бы там ни было если у вас нету джаваскриптов то просто вставте после подключения цсс такой код <script> </script> обязательно с пробелом! при чем можно вставлять где угодно, хоть перед закрывающимся body. если у кого есть объяснение сему поведению, буду рад услышать))

Наконец-то заработало, спасибо.

Z1gnet · November 28, 2013

не за что, самому было интересно.

Switch74 · November 29, 2013

обычно указание свойств в style нужны, чтобы перебить css свойства указанные во внешнем файле или где-то еще ибо все свойства указанные в style приоритетнее остальных. Видимо вы где-то перемудрили со стилями или в браузере у вас подключен пользовательский css который можно побороть только свойствами в style

htmlhtml · November 29, 2013

в браузере у вас подключен пользовательский css

Пользовательский css не подключал. Custom.css пуст. В Инструментах Разработчика user agent stylesheet - все по дефолту. Пробовал !important

Видимо вы где-то перемудрили со стилями

Убрал правило .parent:after {...} которое, возможно, вызывает подозрения. Оно нужно было, чтобы выровнять последнюю строку по ширине, так как text-align: justify этого не делает. Код очень прост:

.parent {    width: 500px;    text-align: justify;    }.child {    display: inline-block;    margin-bottom: 10px;    width: 220px;    background: orange;    }

Результат: http://savepic.ru/4912251.jpg

Edited November 29, 2013 by htmlhtml

Switch74 · November 29, 2013

вы сами могли не подключать css проверьте элемент

htmlhtml · November 29, 2013

вы сами могли не подключать css проверьте элемент

http://savepic.ru/4880508.jpg

Switch74 · November 29, 2013

а что вы пытаетесь этим сделать?

возможно стоит попробовать inline элементы превращать в inline-block, в вашем случае каким-то образом элементы формы влияют на рыжие блоки, пока особо не разбирался почему и как

htmlhtml · November 29, 2013

а что вы пытаетесь этим сделать?
возможно стоит попробовать inline элементы превращать в inline-block, в вашем случае каким-то образом элементы формы влияют на рыжие блоки, пока особо не разбирался почему и как

Работает, если inline элементы превращать в inline-block. Но иногда нужно изменить display у блочных элементов. Глюк так же наблюдается если в inline-block превращать list-item.

каким-то образом элементы формы влияют на рыжие блоки

Хочу заметить, что форма должна содержать определенное количество элементов input или select. Например, если в форме только одно или два поля ввода, то никаких проблем не возникает.

Edited November 29, 2013 by htmlhtml

Sign In

Выравнивание inline-block по ширине в Chrome и Opera

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information