HTML CSS сдвиг кнопки и текста вправо
пока что автор (тоже кнопка, на это можно не обращать внимания), дата написания и кнопка находятся на одном уровне, и прижаты влево. Как разместить автора — прижатым влево, а дату написания и кнопку — вправо? примерно так: Имя дата [кнопка]
Отслеживать
задан 24 мая 2021 в 21:45
320 1 1 серебряный знак 11 11 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
На flex это не сложно, разумеется что ширина в 250px это условно
Менять надо только содержимое outer1 или outer2
.item < display: flex; align-items: center; width: 250px; >.outer2
Имя 25.01.2021 Отслеживать
ответ дан 25 мая 2021 в 1:13
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак
- html
- css
- html5
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как двигать текст внутри кнопки css
Атрибут значения элементов elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.
input type="button" value="Нажми на меня" />
Если вы не укажете value , вы получите пустую кнопку:
input type="button" />
Использование кнопок
Элементы не имеют поведения по умолчанию (их двоюродные братья, (en-US) и (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):
form> input type="button" value="Запустить ПК" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Запустить ПК") button.value = "Выключить ПК"; paragraph.textContent = "ПК запущен!"; > else button.value = "Запустить ПК"; paragraph.textContent = "ПК выключен."; > >
Сценарий получает ссылку на объект HTMLInputElement (en-US), представляющий в DOM, сохраняя этот параметр в переменной button . Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US) .
Добавление сочетаний клавиш на кнопки
Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .
В этом примере, s это специфичная клавиша доступа (ты должен нажать s плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).
form> input type="button" value="Включить ПК" accesskey="s" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Включить ПК") button.value = "Выключить пк"; paragraph.textContent = "ПК включён!"; > else button.value = "Включить ПК"; paragraph.textContent = "ПК выключен."; > >
Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).
Выключенные / Включённые кнопки
Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут disabled , вот так:
input type="button" value="Я выключена" disabled />
Вы можете включать и отключать кнопки во время выполнения, просто установив disabled вместо true или false . В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true . А setTimeout() затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.
input type="button" value="Enabled" />
const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() button.disabled = true; button.value = "Выключена"; window.setTimeout(function () button.disabled = false; button.value = "Включена"; >, 2000); >
Если атрибут disabled не указан, то кнопка наследует своё disabled состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемет, и затем установить disabled на контейнер.
Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
fieldset> legend>Button grouplegend> input type="button" value="Button 1" /> input type="button" value="Button 2" /> input type="button" value="Button 3" /> fieldset>
const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() fieldset.disabled = true; window.setTimeout(function () fieldset.disabled = false; >, 2000); >
Примечание: Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного при загрузке разных страниц. Используйте атрибут autocomplete для управления этой функцией.
Валидация
Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.
Примеры
div class="toolbar"> input type="color" aria-label="select pen color" /> input type="range" min="2" max="50" value="30" aria-label="select pen size" />span class="output">30span> input type="button" value="Clear canvas" /> div> canvas class="myCanvas"> p>Добавьте подходящий фолбэк здесь.p> canvas>
body background: #ccc; margin: 0; overflow: hidden; > .toolbar background: #ccc; width: 150px; height: 75px; padding: 5px; > input[type="color"], input[type="button"] width: 90%; margin: 0 auto; display: block; > input[type="range"] width: 70%; > span position: relative; bottom: 5px; >
let canvas = document.querySelector(".myCanvas"); let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight - 85); let ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); let colorPicker = document.querySelector('input[type="color"]'); let sizePicker = document.querySelector('input[type="range"]'); let output = document.querySelector(".output"); let clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) return (degrees * Math.PI) / 180; > // update sizepicker output value sizePicker.oninput = function () output.textContent = sizePicker.value; >; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = function (e) curX = window.Event ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = window.Event ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); >; canvas.onmousedown = function () pressed = true; >; canvas.onmouseup = function () pressed = false; >; clearBtn.onclick = function () ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); >; function draw() if (pressed) ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); > requestAnimationFrame(draw); > draw();
Спецификации
| Specification |
|---|
| HTML Standard # button-state-(type=button) |
Browser compatibility
BCD tables only load in the browser
Смотрите также
- и HTMLInputElement (en-US) интерфейс, который его реализует.
- Более современный элемент .
- Совместимость свойств CSS (en-US)
Как двигать текст внутри кнопки css
Здравствуйте, у меня есть одна маленькая проблема с моим сайтом. У меня есть одна кнопка для заголовка, но текст внутри выглядит смещенным. Как сделать так, чтобы текст был немного ВВЕРХ в кнопку? В настоящее время немного вниз.
Это класс CSS для этой кнопки:
Что нужно сделать, чтобы текст выровнялся внутри кнопки?
6 ответов
Добавьте также высоту строки:
Просто уберите высоту:
Вы можете исправить свою кнопку, используя следующие правила CSS:
Примечание . Я добавил класс .blue-btn для вашей кнопки. Вы можете переименовать его в соответствии с вашими потребностями.
Эти правила CSS будут вертикально выравнивать внутренний промежуток относительно его родителя, который в этом случае является синей кнопкой. Вот результат
Присвойте идентификатор тегу и добавьте этот стиль для этого id :
Я видел ваш сайт, и у вас есть проблема с вертикальным центром. использование flex — это самый простой способ решить эту проблему.
Добавьте эту CSS на свою кнопку:
Вы можете установить предпочитаемую высоту таким образом.
Как анимировать текст кнопки с использованием только CSS
По сути, мы бы анимировали текст кнопки, чтобы плавно скользить вверх и вниз и отображать другой текст при наведении на него курсора.
Без лишних слов, давайте начнем.
Шаг 1. Добавьте структуру html
Излишне говорить, что нам понадобятся два разных текстовых значения для кнопки.
Основной текст ( New Blog ) будет содержать текущую информацию, а скрытый текст ( Read it now! ) будет содержать значение, отображаемое при наведении курсора.
Вот код на данный момент:
Шаг 2: исходное состояние (без наведения)
Прямо сейчас оба текстовых значения уложены друг против друга в крошечном кнопочном блоке. Давайте используем свойство position , чтобы разделить их.
Когда вы используете position: absolute; , он позиционируется относительно ближайшего расположенного родителя. Если вы посмотрите на приведенный выше код и изображение, мы указали .btn относительную позицию и абсолютное позиционирование дочерних div .
Итак, теперь всякий раз, когда вы пытаетесь изменить положение дочерних элементов div , они будут перемещаться относительно .btn , а не body .
Шаг 3. Состояние при наведении курсора
Если вы посмотрите на приведенный выше код, вы заметите, что мы дали классу .secondary максимальное значение 80 пикселей. Это текст нашей кнопки, который будет отображаться при наведении курсора. При наведении курсора на кнопку верхнее свойство должно быть равно 0, чтобы оно находилось внутри поля кнопки.
Точно так же на этом этапе мы хотим, чтобы существующий текст («New Blog») освободил место для вторичного текста, поэтому мы переместим его вверх, установив верхнее значение -80 пикселей. Посмотрим на это в действии.
Но подождите, здесь чего-то не хватает?
О да, переход не выглядит очень плавным. Плюс почему другой текст все еще виден. Давай исправим.
Шаг 4. Добавьте немного анимации туда и сюда
Прямо сейчас, скольжение вверх и вниз происходит мгновенно. Давайте воспользуемся CSS свойством transition , чтобы контролировать скорость этого движения вверх / вниз.
Кроме того, пришло время избавиться от ненужного текста. Мы хотим показать только тот текст, который находится внутри поля кнопки с классом .btn , и поэтому мы будем использовать overflow:hidden , чтобы скрыть этот текст. Посмотрим на это в действии:
Приведенный выше фрагмент кода упрощен, чтобы показать только код, относящийся к этому разделу. Вы можете найти окончательный код ниже:
Положение текста в кнопке отправки
положение текста на кнопку поиска отправить на мой блог очень низкий в Firefox 4, но не Chrome 10 или IE9. Я пробовал почти все, и ничего не работает, кроме уменьшения размера шрифта текста, что не является оптимальным решением, поскольку текст будет слишком маленьким.
скриншоты
Firefox 4 на Windows 7:
Google Chrome 10.0.648.204 на Windows 7:
rfhb-lpmg — это просто пользовательский шрифт, который я сделал, который реализует U + 2767 повернутую цветочную пулю сердца и U+1F50E правое увеличительное стекло с упрощенными глифами.
11 ответов
я пришел к выводу, что главная проблема заключается в line-height собственность.
оба браузера пытаются вертикально центрировать весь текст на кнопках. В сочетании с height свойство, однако, если недостаточно места для рендеринга полной стандартной высоты строки (заполнение глифа растет довольно большим с большими размерами шрифта), оба браузера прикрепят глиф к верхней части кнопки, обрезая дно.
обычно line-height поможет настроить это, и в Chrome, в ваш пример, это было успешно. Однако, в случае button и input type=»submit» элементы, Firefox игнорирует лини-высота в целом, поэтому его нельзя использовать таким образом, чтобы» исправить » позиционирование персонажа. Используя крайний пример ниже, мы видим, что текст был вытеснен из видимости в Chrome, в то время как он по-прежнему остается прямо в (вертикальном) центре в Firefox.
в Firefox: 
хром: 
когда элемент кнопки остается в собственном стиле (удалите border ), line-height игнорируется обоими браузерами (странно, Chrome также игнорирует высоту, но Firefox этого не делает). Как только кнопка выполнена в пользовательском стиле, Chrome поднимает line-height но Firefox не.
так что вы можете сделать?
если вы все еще хотите использовать шрифты CSS.
- прежде всего, убедитесь, что ваш шрифт делает глифы в том же вертикальном выравнивании, что стандартный шрифт отображает основной символ полной высоты, как H . (похоже, вы сделали это по большей части, так как ваша страница выглядит значительно лучше, чем на скриншотах в вопрос.)
- во-вторых, вы заметите, что если вы используете шрифт, такой как Arial, и отображаете H (при том же размере шрифта), он также низкий. Это потому что встроенный в стандартную строку-высота шрифта дает ему достаточно немного места над персонажем. Это означает, что вы можете иметь некоторый успех, если вы можете отредактируйте шрифт, чтобы обрезать это, тем самым давая персонажу достаточно места, чтобы не обрезаться внизу браузером.
- вероятно, менее идеально для вас, но все же вариант, вы можете использовать другие элементы, либо в сочетании с или вместо button/submit элемент, чтобы получить символ на место.
альтернатива вариант
я не уверен, что ваша цель в использовании шрифтов CSS, но часто это для какой-то формы прогрессивное повышение / грациозная деградация. В этом случае, хотя (как вы сказали в комментариях) специальный символ является стандартизированным Юникодом «правым увеличительным стеклом», он все равно не будет иметь никакого значения для пользователя, если он не рендеринг.
учитывая, что преимущество изящной деградации заключается в упрощении технологии отображения вашего сайта без появления сломанных, использование этого символа кажется подозрительным — без шрифтов CSS или родного шрифта с этим символом он будет отображаться как ? , или просто пустое поле.
лучшим вариантом для изящной деградации, учитывая эту проблему, было бы просто использовать фон-изображение. Сделайте текст кнопки «Поиск», спрячьте текст (через CSS) и примените фоновое изображение, а затем у вас есть фактический изящная деградация и причудливый характер для лучших браузеров.
фоновое изображение мог бы также (очевидно зависит от самих файлов) есть и другие преимущества, такие как более быстрый загрузки и визуализации (например, если разработчик хочет использовать один символ из набора символов шрифта).
FF4 устанавливает собственные стили для входных элементов. Вы можете проверить все из них, если вставить это в поле URL:
в качестве альтернативы вы можете увидеть эти стили, Если вы установите флажок Показать CSS агента пользователя из раскрывающегося списка вкладка стиль, Если у Вас установлен Firebug.
Я пришел к тому же выводу, что и Renesis, хотя я не был уверен, что Firefox не уважает высоту линии или вертикальное выравнивание. Вот схема другого решения, которое позволяет вам продолжать использовать свой причудливый глиф. Поскольку вы используете пиксельные размеры для своей кнопки, попробуйте что-то в этом роде (упрощенный html). Это может быть излишним, и фоновое изображение почти наверняка будет более подходящим, но в любом случае.
и упрощенный css:
я столкнулся с аналогичной проблемой при использовании CSS внутри кнопок. Текст был смещен на 1 пиксель в firefox, а остальные браузеры были в порядке. Я использовал свойство «padding», специфичное для Firefox, следующим образом
исходный код, в котором текст кнопки ввода был на один пиксель ниже в Firefox
и после добавления определенного дополнения Firefox после вышеуказанного css, он был идеален в Firefox
в вашем случае, может быть вам нужно немного больше обивки снизу и, вероятно, обивка сверху в отрицательном тоже (- 1px или-2px).
я столкнулся с этим, когда искал решение этой проблемы, но поскольку я никогда не находил ничего, кроме намека на изменение нижней части заполнения, я хотел поделиться тем, что я нашел, регулируя нижнюю часть заполнения для просто firefox отлично работал.
каждый другой браузер допускал достаточное управление высотой строки для настройки позиционирования текста.
У меня было что — то подобное на этой неделе-я узнал, что вы должны применить определенные элементы ccs к «родительскому» элементу вместо «дочернего». Поэтому в основном попробуйте некоторые css, такие как vertical-align: in .searchform разд.
между тем, у меня возникли проблемы с моим значком поиска на smartemini.com — . Он работает в браузерах aaaaallllll, кроме ie9. ��
я столкнулся с такой же. Я смог решить свои проблемы, нажав прокладку снизу (!)
или, в более широкой картине, Если вы хотите последовательный ввод[‘..’] и кнопка якоря, используйте различные переопределяющие настройки для последнего для полного контроля.
(«размеры футболки» приводят к различным смещениям фона и ширине в другом месте)
то, что вы видите здесь, — это то, как по-разному браузеры отображают текст внутри элементов кнопки, когда пространство плотно. Chrome центрирует тест вертикально, в то время как Firefox выравнивает его сверху.
кроме того, вы используете домашний шрифт, который может иметь некоторые скрытые проблемы, когда дело доходит до вертикальной высоты/ведущей/и т. д.
замечу, что когда я добавляю любой другой символ input ‘ s value — увеличительное стекло падает еще дальше в Firefox. Это говорит о том, что настройка шрифта каким-то образом (например, вертикальное положение или обрезка верхнего/нижнего белого пространства) может помочь.
если это не удается, вы должны изменить свой на элемент, и посмотреть, если стиль button это проще, чем укладка input .
если проблема все еще остается, вам нужно будет переключить тактику и обернуть кнопку в .
(кстати, вы можете альтернативно обернуть button текст и делать похожие отрицательная маржа взломать это, хотя я подозреваю, что получение вертикального центрирования легче с button внутри div .)
тем не менее, вы действительно должны просто использовать старомодную замену фонового изображения — он будет как рендеринг, так и загрузка быстрее. ��
эта проблема возникает только в Firefox 4 / Win7 с перевод на русский язык включен режим рендеринга (который включен по умолчанию). Режим рендеринга Firefor4 GDI работает правильно.
Это может быть вызвано вертикальный-выровняйте и базовый. Но базовая линия U1F50D не находится в самой низкой точке. Возможно, вы должны попытаться переместить точки шрифта немного выше, установить точку y самой низкой точки в 0.
много anwsers здесь. я думаю, что это самый простой способ сделать это :
надеюсь, это поможет =D
Я обнаружил, что комбинация заполнения и высоты линии делает трюк. Как указано, Firefox игнорирует высоту линии.
- убедитесь, что вы установили большую нижнюю прокладку, чем верхнюю прокладку. Возиться с ним немного, и вы сможете вертикально выровнять текст в Firefox.
- затем вы увидите, что это подталкивает текст слишком близко к верхней части элемента в Webkit. Теперь используйте большую высоту линии, чтобы правильно выровнять ее в Webkit и вуаля!
я протестировал это на машине Windows 7 под управлением Firefox 7, Chrome 16, Safari 5.1 и IE9.
Positioning text inside a button
I have buttons with text in it which has too much space above it. Is looks like this:
How can I position the text a little bit higher so that it doesn’t get sliced by the border of the button?
Here is my CSS so far:
The line-height property doesn’t change anything, even with the use of !important .
2 Answers 2
Setting a fixed height will throw the alignment off. Setting the font size will be enough for the div to auto-size and the text will be centered. Try this new css:
If you really want to preserve the fixed width and height of the button and the font size of the text then you could do something like below. This is putting the text in a different div so you can position it on top of the button. If the button is position: relative, the text div is position: absolute, and the HTML is structured so the text div is within the button tag, then it will layer nicely. Also, when done this way the text will move with the button and won’t be displaced (if say you give the button a margin: 100px).
Похожие публикации:
- Как сделать кнопку посередине css
- Как сделать круглую кнопку в css
- Как сделать меню навигации css
- Как сделать обводку текста в html css
text-decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст ( пример ). overline Линия проходит над текстом ( пример ). underline Устанавливает подчеркнутый текст ( пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
text-decoration Стратегическое нападение
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.