Вопросы по тегу: css

(156)

Заставить гибкий элемент охватить всю ширину строки

Я пытаюсь сохранить первые 2 дочерних элемента в той же строке, в то время как третий элемент находится внизу на полную ширину, и все это при использовании flex.Меня особенно интересует использование свойств flex-grow и flex-shrink для первых двух элементов (это одна из причин, по которой я не использую проценты), однако третий элемент действительно должен быть полной ширины и ниже первых двух.Элемент label программно добавляется после элемента text при возникновении ошибки и невозможности изменить код.Как заставить элемент метки располагаться на 100 % по ширине ниже двух других элементов, расположенных с помощью flex? .родитель { дисплей: гибкий; выравнивание элементов: по центру; ширина: 100%; цвет фона: #ececec; } .родитель * { ширина: 100%; } .родитель #текст { минимальная ширина: 75 пикселей; гибкая усадка: 2,25; } Сообщение об ошибке
M

MPaul

4 года назад

Ответов: 1

Bootstrap 4 Ввод файлов

Я борюсь с файловым браузером bootstrap 4. Если я использую custom-file-control, я все время буду видеть Choose file value. https://v4-alpha.getbootstrap.com/components/forms/#file-браузерЯ хотел бы изменить значение выбора файла после того, как файл был выбран. Это значение на самом деле скрыто в css .custom-file-control:lang(en)::after, и я не знаю, как получить к нему доступ и изменить его в javascript. Я могу получить значение выбранного файла следующим образом:document.getElementById("exampleInputFile").value.split("\\").pop(); не нужно менять .custom-file-control:lang(en)::after { content: "Choose file..."; } как-тоссылка: http://codepen.io/Matoo125/pen/LWobNp
M

Matej Vrzala M4

5 лет назад

Ответов: 17

CSS: обходной путь для фонового фильтра?

backdrop-filter — новая функция CSS, которая еще недоступна в современных браузерах (по крайней мере, по состоянию на 1 июля 2016 г.). Chrome 51 поддерживает backdrop-filter с помощью флага Experimental Web Platform. Safari 9.1 поддерживает его с префиксом -webkit- Firefox 47 не поддерживается Находясь в таком непригодном для использования состоянии, я хотел бы знать, существует ли какой-либо альтернативный способ получить тот же результат.Обходные пути JS для размытие, оттенки серого,… также приветствуютсяРазработку фонового фильтра можно отслеживать через https://bugs.chromium.org/p/chromium/issues/detail?id=497522
r

ryanafrish7

6 лет назад

Ответов: 7

Почему для центрирования элемента, который находится сверху: 50%, требуется translateY(-50%)?

Я вижу, что этот код работает для выравнивания div по вертикали внутри его родительского элемента:.элемент { положение: родственник; верх: 50%; трансформировать: перевестиY(-50%); } Вопрос почему? Моей первой мыслью было то, что родительский элемент охватывает больше, чем окно просмотра. Я сделал родительскую область просмотра высотой 100vh и шириной 100%. Это не сработало. Мне все еще нужен перевод или отрицательное смещение поля. Зачем мне нужно отрицательное смещение, если родительский элемент имеет значение margin: 0;? Это из-за расчетной маржи, которую я не учитываю?
l

ltrainpr

5 лет назад

Ответов: 4

SVG меняет цвет при повороте в Safari 10

Я только что столкнулся с очень странной проблемой, которая проявляется только в Safari 10. У меня есть игральные карты, изображения svg, которые иногда поворачиваются с помощью transform:rotate(xdeg).Карта, которую я использую, имеет рисунок красного блока. Когда он не повернут или повернут под прямым углом, то есть на 90, 180, 270, он выглядит нормально. Но под любым другим углом фоновый узор становится синим! Я только что получил отчет об этом от одного из моих пользователей и никогда не видел ничего странного. Все остальные браузеры работают нормально, Safari 9 работает нормально.Я предполагаю, что это просто очень странная ошибка в Safari 10, но есть идеи, как ее обойти? Я создал минимальную копию по адресу:https://jsfiddle.net/2zv4garu/1/
E

Einar Egilsson

5 лет назад

Ответов: 1

ввод файла bootstrap 4 не показывает имя файла

У меня проблема с классом custom-file-input в Bootstrap 4. после того, как я выбрал файл, который я хочу загрузить, имя файла не отображается.Я использую этот код: Choose file Upload Есть идеи, как это исправить без особых сложностей?
T

Terchila Marian

4 года назад

Ответов: 9

Как добавить цветное наложение на фоновое изображение?

Я часто встречал этот вопрос как в SO, так и в Интернете. Но ни один из них не был тем, что я ищу.Как добавить наложение цвета на фоновое изображение, используя только CSS?Пример HTML: Пример CSS:.testclass { background-image: url("../img/img.jpg"); } Обратите внимание: Я хочу решить эту проблему, используя только CSS. т. е. я НЕ хочу добавлять дочерний div в div «testclass» для наложения цвета. Это не должен быть «эффект наведения». Я хочу просто добавить наложение цвета на фоновое изображение. Я хочу иметь возможность использовать непрозрачность, т.е. я ищу решение, позволяющее использовать цвет RGBA. Я ищу только один цвет, скажем, черный. Не градиент. Возможно ли это? (Я был бы удивлен, если бы нет, но я ничего не смог найти по этому поводу), и если да, то как лучше всего это сделать?Все предложения и советы приветствуются!
A

Alex

6 лет назад

Ответов: 4

Что это означает, когда Chrome Dev Tools показывает вычисляемое свойство серым цветом

Обратите внимание, не панель «Стили» (я знаю, что в этом контексте означает серое — неприменимо), а следующая панель — панель «Вычисляемые свойства».Что означает, что вычисляемое свойство отображается серым цветом?Пример:
A

AmbroseChapel

6 лет назад

Ответов: 1

execCommand() теперь устарела, какая альтернатива?

Я намеревался использовать метод Document.execCommand() вместе с атрибутом contenteditable для создания собственного редактора WYSIWYG. Но когда я проверил documentation на Document.execCommand(), я обнаружил, что он устарел. Какая современная (или существующая) альтернатива ему?
O

Omar

2 года назад

Ответов: 4

Как убрать синюю подсветку кнопки на мобильном телефоне?

Я пытаюсь удалить синее поле, которое появляется при нажатии перед кнопками, как вы можете видеть ниже: Прежде чем задать вопрос, я провел много исследований, я попробовал решения, предложенные в следующих темах: Как убрать границу фокуса (контур) вокруг текстовых полей/полей ввода? (хром) Удалить синюю рамку вокруг кнопок. HTML Как убрать синюю границу тени на кнопке при нажатии Как удалить синий «выделенный» контур на кнопках? Как удалить синий «выделенный» контур на кнопках? Удалить синюю рамку с кнопки в пользовательском стиле css в Chrome Как убрать фокус вокруг кнопок при нажатии Я пробовал все ответы! Он работает на компьютере, но не на мобильном телефоне.Если вы используете компьютер, вы можете попробовать имитировать мобильный телефон с помощью инспектора. Вот кнопка: https://jsfiddle.net/t4ykshst/ #добавить { -webkit-box-sizing: поле содержимого; -moz-box-sizing: поле содержимого; box-sizing: контент-бокс; контур: нет; курсор: указатель; отступ: 10 пикселей; переполнение: скрыто; граница: нет; -webkit-border-radius: 50%; радиус границы: 50%; цвет: rgba (255, 255, 255, 0,9); выравнивание текста: по центру; фон: #1abc9c; -webkit-box-shadow: 0 4px 3px 2px rgba (0, 0, 0, 0,2); box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0,2); } # добавить: активный { непрозрачность: 0,85; -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0,2); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0,2); }
S

Scoop Devek

5 лет назад

Ответов: 5

Адаптивные таблицы Bootstrap 4 не будут занимать 100% ширины

Я создаю веб-приложение с использованием Bootstrap 4 и сталкиваюсь с некоторыми странными проблемами. Я хочу использовать класс Bootstrap, реагирующий на таблицы, чтобы разрешить горизонтальную прокрутку таблиц на мобильных устройствах. На настольных устройствах таблица должна занимать 100% ширины содержащего DIV.Как только я применяю класс .table-responsive к своей таблице, таблица сжимается по горизонтали и больше не занимает 100% ширины. Любые идеи?Вот моя разметка: Priority Origin Destination Mode Date Action 0 PHOENIX, AZ SAN DIEGO, CA DRIVING 2017-01-15 13:59:00 Если я применю ширину 100% к классу .table-responsive, это сделает саму таблицу шириной 100%, но дочерние элементы (TBODY, TR и т. д.) по-прежнему будут узкими.
e

eat-sleep-code

5 лет назад

Ответов: 14

В компоненте vue.js, как использовать реквизит в css?

Я новичок в vue.js. Вот моя проблема:В таком файле *.vue: export default { name: 'SquareButton', props: ['color'] } #a { background-color: ? } Как я могу использовать реквизит color в background-color: (где теперь ?).Спасибо.
M

MingWen

5 лет назад

Ответов: 8

Удаление черных точек с li и ul

Я работаю над проектом и использую некоторые ul и li.Но я не могу понять, как удалить эти надоедливые черные точки, которые идут с этими списками.Кто-нибудь из вас может помочь мне с этим?Редактировать: я совершенно забыл выполнить поиск на этом сайте, если ответ уже был (сумасшедший), оказывается, он был! Отмечено как дубликат, спасибо всем за помощь!
P

ProRacer420

6 лет назад

Ответов: 3

Как работает минимальный и максимальный контент?

Как значения min-content и max-content рассчитываются в CSS?А что означает внутренняя размерность?
W

Wes

4 года назад

Ответов: 2

Make grid container fill columns not rows

I want my grid to fill in vertically like this: 1 4 7 2 5 8 3 6 9 ... arbitrary number of additional rows. Instead, it fills in horizontally like this: 1 2 3 4 5 6 7 8 9 I want to specify the number of columns in my grid, not the number of rows. This is what my div looks like with inline CSS styling: 1 2 3 4 5 6 7 8 9 It's important that my grid be 3 columns wide, but I want the items to be populated by column, not by row. Is this possible in CSS Grid? I've read through this https://css-tricks.com/snippets/css/complete-guide-grid/ but didn't see anything about order. CSS Flexbox has flex-direction, isn't there an attribute like that for CSS Grid?
G

Glen Pierce

5 лет назад

Ответов: 5

Класс CSS для курсора указателя

Есть ли класс или атрибут CSS для pointer:cursor в Bootstrap 4 специально для кнопки или ссылки? Образец кнопки
w

w411 3

4 года назад

Ответов: 10

Jenkins - HTML Publisher Plugin - No CSS is displayed when report is viewed in Jenkins Server

I have a strange problem with the Jenkins HTML Publisher plugin, wherein all the fancy CSS I have added to the report is stripped out when viewed in Jenkins. If I download the report to local, I am able to see the CSS formatting. Is there a setting in Jenkins which allows CSS to be viewed? My HTML Publisher Settings in Jenkins: My Report Page when displayed in Jenkins : My Report Page when displayed in Local :
V

Vall

6 лет назад

Ответов: 16

Могу ли я создать сетку CSS с динамическим количеством строк или столбцов?

Что я хочу сделать, так это создать сетку CSS с динамическим количеством ячеек. Для простоты предположим, что в строке всегда будет четыре ячейки. Могу ли я указать сетку с таким динамическим количеством строк?Для упрощения вот реализация Flexbox: const ЦВЕТА = [ '#FE9', '#9АФ', '#F9A', "#АФА", "# ФА7" ]; функция addItem (контейнер, шаблон) { пусть цвет = ЦВЕТА[_.random(ЦВЕТА.длина - 1)]; пусть число = _.random (10000); container.append(Mustache.render(template, {color, num})); } $(() => { константа tmpl = $('#item_template').html() константный контейнер = $('#app'); for(let i=0; i { addItem(контейнер, тмпл); }) container.on('щелчок', '.del_el', (e) => { $(e.target).closest('.item').remove(); }); }); .контейнер { ширина: 100%; дисплей: гибкий; flex-flow: перенос строк; выравнивание содержимого: flex-start; } .контейнер .элемент { flex: 0 0 вычисл(25% - 1em); минимальная высота: 120 пикселей; поля: 0,25em 0,5em; } Добавить элемент {{ число }} Удалить P.S. Видимо, я недостаточно ясно выразился в первый раз... Я хочу воссоздать этот эффект, используя последний CSS Grid Layout.
a

art-solopov

5 лет назад

Ответов: 5

заставить css grid container заполнять весь экран устройства

Как заставить контейнер сетки css использовать всю ширину и высоту экрана устройства для одностраничного приложения? Модифицированный пример от Mozilla: документация Firefox .обертка { отображение: сетка; стиль границы: сплошной; цвет границы: красный; столбцы сетки-шаблона: повтор (3, 1fr); строки шаблона сетки: повтор (3, 1fr); зазор сетки: 10px; } .один { стиль границы: сплошной; цвет границы: синий; сетка-столбец: 1/3; сетка-ряд: 1; } .два { стиль границы: сплошной; цвет границы: желтый; сетка-столбец: 2/4; сетка-ряд: 1/3; } .три { стиль границы: сплошной; цвет границы: фиолетовый; сетка-ряд: 2/5; сетка-столбец: 1; } .четыре { стиль границы: сплошной; цвет границы: аква; сетка-столбец: 3; сетка-ряд: 3; } .пять { стиль границы: сплошной; цвет границы: зеленый; сетка-столбец: 2; сетка-ряд: 4; } .шесть { стиль границы: сплошной; цвет границы: фиолетовый; сетка-столбец: 3; сетка-ряд: 4; } Один Два Три Четыре Пять Шесть
m

metrix

5 лет назад

Ответов: 4

Как работает «позиция: липкая»; собственность работа?

Я хочу, чтобы панель навигации прилипала к верхней части окна просмотра, когда пользователь прокручивает страницу, но это не работает, и я понятия не имею, почему. Если вы можете помочь, вот мой код HTML и CSS: .container { мин-высота: 300vh; } .nav-selections { преобразование текста: прописные буквы; межбуквенный интервал: 5 пикселей; шрифт: 18px «лато», без засечек; дисплей: встроенный блок; текстовое оформление: нет; белый цвет; отступ: 18 пикселей; float: right; маржа слева: 50 пикселей; переход: 1,5 с; } .nav-selections: hover { переход: 1,5 с; черный цвет; } ul { цвет фона: # B79b58; перелив: авто; } li { тип-стиль-список: нет; } Связаться О программе Продукты Главная страница
H

Harleyoc1

5 лет назад

Ответов: 31

Как я могу правильно выровнять один элемент с помощью flexbox?

https://jsfiddle.net/vhem8scs/Возможно ли, чтобы два элемента были выровнены по левому краю, а один - по правому краю с помощью flexbox? Ссылка показывает это более наглядно. Последний пример - это то, чего я хочу достичь.Во флексбоксе у меня один блок кода. С float у меня есть четыре блока кода. Это одна из причин, почему я предпочитаю flexbox.HTML One Two Three One Two Three CSS.wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div { float: left; } .result div:last-child { float: right; }
J

Jens Törnell

6 лет назад

Ответов: 4

Ошибка «Uncaught TypeError: a.indexOf не является функцией» при открытии нового проекта Foundation

Я создал новый проект Foundation 5 через bash с foundation new my-project. Когда я открываю файл index.html в Chrome, возникает ошибка Uncaught TypeError: a.indexOf не является функцией. В консоли отображается ошибка, происходящая из jquery.min.js: 4.Я создал проект, следуя инструкциям на сайте фонда, но мне кажется, что я не могу избавиться от этой ошибки. Foundation и jQuery выглядят так, как будто они включены и правильно связаны в файле index.html, а связанный файл app.js включает $ (document) .foundation ();Кто-нибудь знает, что вызывает эту ошибку? и какое решение может быть?
F

FreddieE

5 лет назад

Ответов: 8

Заполните оставшуюся высоту или ширину в гибком контейнере

У меня два блока расположены бок о бок во флекс-боксе. Правая рука всегда должна быть одинаковой ширины, а я хочу, чтобы левая просто занимала оставшееся пространство. Но не будет, если я специально не установлю его ширину.Итак, на данный момент он установлен на 96%, что выглядит нормально, пока вы действительно не раздавите экран - тогда правому div немного не хватает места, которое ему нужно.Думаю, я мог бы оставить все как есть, но это неправильно - как будто должен быть способ сказать: правый всегда один и тот же; Вы слева - получаете все, что осталось .ar-course-nav { курсор: указатель; отступ: 8px 12px 8px 12px; радиус границы: 8 пикселей; } .ar-course-nav: hover { цвет фона: rgba (0, 0, 0, 0,1); } Название курса, которое действительно довольно длинное и может продолжаться немного, но потом, когда вы думаете, что он остановился, он продолжает действовать еще дольше! Очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень длинное название отдела Создано: 21 сентября 2016 & gt;
A

Adam Benson

6 лет назад

Ответов: 2

IE11 - существует ли полифилл / скрипт для переменных CSS?

Я разрабатываю веб-страницу в среде смешанного веб-браузера (Chrome / IE11). IE11 не поддерживает переменные CSS, существует ли полифилл или скрипт, который позволил бы мне использовать переменные CSS в IE11?
R

R. StackUser

4 года назад

Ответов: 5

What is class="mb-0" in Bootstrap 4?

The latest documention has: Lorem ipsum Q: What is mb-0?
P

Phillip Senn

5 лет назад

Ответов: 6

`col-xs-*` not working in Bootstrap 4

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:Hello, world! vicki williams The text-align works fine: But when making the column equal to extra small like so: vicki williams Then the text-align no longer works: Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated. Here is my complete code: Hello, world! vicki williams
Y

YoungCoder

5 лет назад

Ответов: 6

Why put in front of the file name "_" or "_" in scss/css?

Why put _ in front of the filename in scss?_filename.scss - Why does it need _ ?
N

Niko_D

6 лет назад

Ответов: 6

Bootstrap 4: раскрывающееся меню уходит в правую часть экрана.

Кажется, я не могу получить выпадающие элементы, чтобы они не уходили со страницы. Я попробовал пару вещей из BS3, но они, похоже, не работают. Я не уверен, что это из-за ml-auto. (игнорируйте операторы if-else)Вот CodePen: --> Company --> Find Jobs --> --> --> Find Jobs Post Job Register Profile My Jobs My Searches Employer Dashboard Login Logout Account --> Register --> --> Profile My Jobs My Searches --> --> Employer Dashboard --> --> Login --> --> Logout -->
b

bbennett36

5 лет назад

Ответов: 5

Bootstrap 4. Как выровнять кнопку по центру?

{{ job.job_title }} Google Inc. - {{ job.location }} Job Description Posted: {{ formatDate(job.date_created) }} {{ buttonText }} Не могу понять, как центрировать эту кнопку. В BS 3 я бы просто использовал центральный блок, но это не вариант в BS4. Есть какие-нибудь советы?
b

bbennett36

5 лет назад

Ответов: 11

Когда должны быть видны теги <script> и почему?

Элемент script, стилизованный под display: block отображается видимым. Почему это возможно и есть ли реальный вариант использования, когда это желательно? td> * { дисплей: блок; } var test = 1; фон 1
w

wutzebaer

6 лет назад

Ответов: 5

2022 WebDevInsider