Как переместить текст в css в право
css-переместить текст вправо
Это то, что меня очень часто раздражает.
Если вы создаете <div> и стилизуете границу (например, border-radius: 3px; ), текст находится почти поверх границы, что выглядит очень плохо.
Единственное решение, которое я мог придумать, — это обернуть содержимое этого div в другой div и переместить оберточный div ±3px вправо. Это создает много дополнительной наценки, и это почему-то кажется неправильным, как будто есть лучшее решение.
Итак, вот мой вопрос:
Можно ли переместить содержимое div на три пикселя вправо, как описано выше, только с помощью css-only?
Конечно, я хотел бы кроссбраузерное решение, но я не возражаю против 1 Правила css на браузер, я могу бросить его где-нибудь в нижней части моей таблицы стилей и никогда больше не смотреть на него, это не усложнит markup.
3 ответа
Я знаю, что, добавляя style=right: 100px; к изображению, он может немного сдвинуть изображение вправо.
Как я могу сделать это с текстом, Я хочу переместить текст на 100 пикселей вправо. Я бы предпочел не использовать CSS, но если придется, то все в порядке.
Я хочу, чтобы текст в EditText переместился вправо. Потому что если не первая буква, то она покрыта границей EditText.
Добавьте это в свой div, в котором есть текст.
Легко, вы можете использовать либо padding: 0 3px; (только горизонтальное заполнение), либо padding-left: 3px; ..
HTML
CSS
вы можете легко получить желаемое через padding и вы можете настроить прокладку со всех четырех сторон left,right,top,bottom .
Я хочу переместить свою выпадающую строку меню вправо. Я пробовал использовать как right align, так и text-align: right, в результате чего меню перемещается вправо, а выпадающие меню-нет. Теперь у меня есть следующее выпадающее меню, но в левой части: Со следующим CSS : #headermenu < >#headermenu.
Я пытаюсь переместить логотип вправо, но он не двигается.
HTML: <div fixed stackable borderless blue inverted menu grid> <div three wide column> <img src=http://semantic-ui.com/images/logo.png </div> <div ui search eight.
Похожие вопросы:
Я нашел несколько ответов о том, как можно переместить текст ячейки вправо, но как я могу переместить текст раздела вправо?
как переместить текст шатра справа налево и влево и вправо, нажав одну кнопку, как я могу это сделать, может ли кто-нибудь мне помочь?
Я не могу поверить, что не могу найти способ в Webstorm, чтобы, когда вы выделяете код, затем перемещаете его вправо или влево как группу (вкладка влево или вправо, перемещая его влево или вправо).
Я знаю, что, добавляя style=right: 100px; к изображению, он может немного сдвинуть изображение вправо. Как я могу сделать это с текстом, Я хочу переместить текст на 100 пикселей вправо. Я бы.
Я хочу, чтобы текст в EditText переместился вправо. Потому что если не первая буква, то она покрыта границей EditText.
Я хочу переместить свою выпадающую строку меню вправо. Я пробовал использовать как right align, так и text-align: right, в результате чего меню перемещается вправо, а выпадающие меню-нет. Теперь у.
Я пытаюсь переместить логотип вправо, но он не двигается. HTML: <div fixed stackable borderless blue inverted menu grid> <div three wide column> <img.
Я хочу переместить текст, например 10dp вправо, не TextView, а письменный текст + курсор. Как я могу это сделать? Спасибо. Hallo находится слишком близко к границе
Полный новичок здесь! Я пытаюсь переместить какой-то текст (h4) немного вправо на своей веб-странице и не знаю, как это сделать? Кроме того, должен ли я использовать CSS или есть способ для HTML.
Я хочу использовать свойство css:: before, чтобы добавить тег перед абзацем. Мне удается правильно отобразить тег, но он толкает текст в абзаце вправо. Я хочу избежать этого, так как тег будет.
Css — переместить текст вправо
Это то, что меня очень раздражает.
Если вы создаете <div> и стилируете границу (например, border-radius: 3px; ), текст почти поверх границы, что выглядит очень плохо.
Единственное решение, которое я мог придумать, заключалось в том, чтобы обернуть содержимое этого div в другой div и переместить обертку div ± 3px вправо. Это создает много дополнительной надбавки, и это как-то не кажется правильным, как будто есть решение bettr.
Итак, вот мой вопрос:
Можно ли перемещать содержимое div трех пикселей вправо, как описано выше, только с помощью css?
Конечно, я бы хотел использовать кросс-браузерное решение, но я не против 1 правила CSS для каждого браузера, я могу бросить это где-то внизу моей таблицы стилей и никогда не смотреть на него снова, что не усложнит разметка.
Добавьте это в свой div, в котором есть текст.
Легко, вы можете использовать padding: 0 3px; (только горизонтальное дополнение), padding-left: 3px; ..
Изменить позиционирование текста в блоке
Позиционирование текста в блоке css
У меня есть текст скины, хотел перенести чуть правее но не получается, переносится или блок или.
Позиционирование текста в блоке div. Текст поверх изображения
Я только начинаю учиться составлять блоки в div, и столкнулась с такой задачей (пример на рисунке.
Как изменить расположение текста в блоке?
Доброго времени суток! Такая проблема: Хочу переместить текст в самый верх (как на картинке).
Позиционирование в блоке
У меня есть блок <div <div <div.
Сообщение от Dmitry
Trances, во-первых, что это за тег такой <text>? Во-вторых, переверстайте всё — это не код, а жесть просто. Каждую новую строку оберните в отдельный тег — желательно блочный, либо ограничьте по ширине и Вам будет их проще позиционировать.
Сообщение от mrBobrillo
| Меню пользователя @ Fedor92 |
| Читать блог |
Сообщение от Fedor92
Сообщение от GoDr
Сообщение от GoDr
Fedor92, так никто не говорит что ты не можешь так делать.
И открою тебе одну тайну. у нас всё текст!
Что касается семантики.. Это строки или практически очень краткая информация, я бы сказал что даже табличное размещение (особенно если брать в основу картинку самого вопроса). И эти строки однозначно не подпадают по понятие абзаца. В принципе это и есть суть семантики.
Хотя вёрстка — это искусство, где можно использовать любые приёмы
Сообщение от GoDr
Fedor92, так я только поддержал твоё мнение. ДА, лучше списком. Но ты, по очень не понятной мне причини начал со мной спорить.
вот твоя фраза в 11-м
Сообщение от Fedor92
Сообщение от Fedor92
Это ты сам с собой тогда споришь! А я лишь согласился с тобой и продолжил мысль.
PS
магнитные бури что ли.
Сообщение от GoDr
Сообщение от GoDr
| Меню пользователя @ Fedor92 |
| Читать блог |
Fedor92, ты меня победил.
моя тупость и глупость просто меня самого уже добивает.. Но я бы никогда не стал бы с тобой играть в футбол 😀 не понятно в какой ты команде. Ты верстал параграфами и тут же говоришь что лучше списком.. Так зачем же параграфами? Или не так. Так зачем же лучше списком?
Кстати, магнитные бури ни «у кого», а «вообще».. 😀
| Меню пользователя @ GoDr |
| Читать блог |
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Позиционирование в блоке
Туплю нынче безбожно! Хочу разместить текст без использования таблицы. Создал див блок, вложил в.
Позиционирование фона в блоке
Здравствуйте. Помогите разобраться с проблемой. Вставил на background картинку, привязал её к.
Фиксированное позиционирование фонового рисунка в блоке
На пустой странице есть элемент div с высотой 1000px и фоновая картинка пропадает при попытке её.
Позиционирование блока в блоке c position:absolute
Доброго времени суток! Насколько я знаю, есть такой приём: позиционируют блок с position:relative.
Разметка абзацев (практические сведения о языке HTML):ИнфоБлог
Начало абзаца (paragraph) задает тег <Р>. Закрывающий тег </Р> тоже возможен, но необязателен, и на практике им не пользуются[1].
Обычные концы абзацев, которые ставят текстовые редакторы, здесь не действуют: браузеры их просто не замечают. Мы сможем нажимать Enter в HTML-редакторе для своего удобства, а для браузера приберегать тег Р.
Текст в абзаце может быть выровнен влево, вправо, по обоим краям и по центру. Для этого применяют атрибут ALIGN (выравнивание):
<Р ALIGN =»LEFT»> — выравнивание влево;
<Р ALIGN=»RIGHT»> — выравнивание вправо;
<Р ALIGN=»CENTER»> — выравнивание по центру;
<Р ALIGN=»JUSTIFY»> — выравнивание по обоим краям.
К сожалению, в HTML не бывает переносов, так что
пользоваться таким выравниванием имеет смысл лишь при достаточно широкой
текстовой колонке
Каждый следующий тег абзаца отменяет форматирование предыдущего. При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой. Если вам нужно, чтобы абзацы шли без пустой строки, и чтобы выравнивание распространялось и на следующий абзац, вместо нового абзаца ставьте тег обрыва строки (break): <BR>. Например, строки стихотворения надо отделять друг от друга разрывом строки, а четверостишия — двумя разрывами или одним абзацем. Тег BR — непарный.
Для форматирования абзацев можно пользоваться также тегом раздела (division) <DIV>. Он работает точно так же, как Р, в нем можно использовать атрибут выравнивания ALIGN, но между двумя соседними разделами не оставляется пустая строка. Здесь закрывающий тег необходим — </DIV>.
Раздел считается
главнее абзаца — новый абзац, для которого не указан способ выравнивания, не
отменяет оформления раздела, и текст выравнивается так, как задано в теге
раздела <DIV ALIGN=».
..»>.
Для центровки текста есть специальный тег <CENTER>…</CENTER>. Центруется не только текст, а вообще все, что лежит внутри этого контейнера: рисунок, таблица, линия, текст.
Шесть стандартных тегов предусмотрено для оформления заголовков: <Н1>, <Н2>,…, <Нб>. Причем у Н1 — самый крупный шрифт, у Н6 — самый мелкий. Все они тоже могут иметь атрибут выравнивания ALIGN.
Код прописан в Блокноте
<HTML>
<HEAD>
<TITLE> Заголовки </TITLE>
</HEAD>
<BODY>
<h2 align=center> Это заголовок первого уровня </h2>
<h3> Это заголовок второго уровня </h3>
<h4> Это заголовок третьего уровня </h4>
<h5> Это заголовок четвертого уровня </h5>
<H5> Это заголовок пятого уровня </H5>
<H6> Это заголовок шестого уровня </H6>
</BODY>
</HTML>
Результат такой разметки в браузере
Есть также особое
оформление для цитат — тег <BLOCKQUOTE>.
Все, что расположено
между открывающим и закрывающим тегом, будет сдвинуто вправо и отделено от
предыдущего и последующего текста пустой строкой.
А как сделать абзацный отступ? — продолжает свой допрос любитель текстовых редакторов.
Не думайте, что я опять вам это запрещу! Но вопрос не такой простой, как можно подумать.
В чистом HTML (без применения стилевой разметки CSS) не предусмотрено стандартной команды для создания абзацного отступа, а знакомые нам по текстовым редакторам способы здесь не срабатывают. Значки табуляции, которыми принято сдвигать первую строку абзаца вправо, браузеры не воспринимают почему-то. Сделать отступ несколькими пробелами тоже не удастся, потому что в HTML любые два, три или более пробелов воспринимаются как один.
Что же делать?
Поставить вместо простых
пробелов неразрывные (non breaking space), которые и создадут абзацный отступ.
Неразрывный пробел
в HTML записывается такой
последовательностью из пяти символов: ­ —
непременно строчными буквами. Ставите пять-семь таких кучерявых объектов в
начале абзаца и имеете абзацный отступ. Кто спорит, это неудобно да и
увеличивает объем файла. Но американцы, разрабатывавшие стандарты, к оформлению
текста абзацными отступами не привыкли, а музыку заказывают они. Ну, и
кроме того, в любом хорошем редакторе HTML вы сможет сделать простенькую макрокомандочку, которая
будет вам сразу ставить нужное число этих штуковин.
Подробнее мы будем говорить в стилевой разметке CSS, вы увидите, как элементарно эта неразрешимая проблема решается там.
Код прописан в Блокноте
<!doctype html>
<html>
<head>
<style>
p { text-indent: 25px; }
</style>
<head>
<body>
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым <br>
некоторые относят и красную строку, считая, что употребление ее не так
уж и важно.
<br>
Однако надо понимать, что любая запятая несет в себе как эстетическую, так <br>
и смысловую нагрузку, а не только является данью правилам грамматики – это<br>
касается и форматирования.
</body>
</html>
Результат такой разметки в браузере
Чтобы сдвинуть абзац от левой границы экрана, можно воспользоваться тегами <UL> или <ОL>. Каждый такой UL или ОL сдвигает левую границу абзаца вправо. Два UL’a — вдвое больший сдвиг, три — соответственно еще больше. Закрывающие теги </UL> и </ОL> сдвигают левую границу на одну позицию назад, влево.
Вообще-то, ОL и UL предназначены для создания нумерованных и ненумерованных
списков.
Но их можно использовать и таким вот образом. Кроме того, сдвиг левой
границы текста можно сделать и с помощью одного или нескольких тегов <BLOCKQUOTE > (выделение цитат).
Сдвинуть правую границу так же просто нам не удастся. Чтобы сделать текст колоночкой, нужно поместить его в таблицу.
Литература:
А.Левин. Самоучитель полезных программ.Питер. 2008
[1] При работе со стилевыми таблицами CSS вам придется все-таки закрывать контейнеры Р.
[2] Кстати, обращаю ваше внимание на то, что и вручную делать переносы нельзя: вы
никогда не знаете, на какую ширину
экрана растянется ваш текст (экраны у людей очень уж разные), а значит, не
удастся угадать, на какие слова попадут концы строк. Есть, правда, в языке HTML
специфический объект — выражение, состоящее из пяти символов: ­ Если
эту бяку вставить в середину слова, она будет воспринята как значок мягкого (то
есть, видимого только когда попадает на конец строки) переноса.
Но в ряде
браузеров, включая широко распространенный Firefox, мягкий перенос не работает.
javascript — текст слева и справа на странице HTML
Задать вопрос
спросил
Изменено 5 лет, 2 месяца назад
Просмотрено 26 тысяч раз
Я хочу, чтобы вывод HTML был похож на этот —
Мое первое предложение Мое второе предложение
Итак, мой код —
Мое первое предложение Мое второе предложение
и вывод был —
My First SentenceMy Second Sentence
Итак, я добавил к элементу «margin-left: 100px», а затем вывод был в следующей строке-
My First Sentence
Мое второе предложение Пожалуйста, помогите мне с этим.
Скорее всего, какой-то другой css перезаписывает его, и мне нужно знать, как я могу получить то представление, которое хочу. Мой текущий код выглядит так:
Мое первое предложение Мое второе предложение
- JavaScript
- HTML
- CSS
5
я вижу 3 варианта (вы уже использовали float) с display и text-align / text-align-last . Выбор около сколько лет браузеру что вы собираетесь поддерживать
диапазон,
а {
отображение: встроенный блок;
/* опционально*/
}
/* новейший браузер */
h4.flex {
дисплей: гибкий;
выравнивание содержимого: пробел между;
}
/* проверить на canisue.com */
h4.tAl {
выравнивание текста: по ширине;
последнее выравнивание текста: выравнивание;
}
/* самые старые браузеры, такие как IE8 */
h4.tA {
выравнивание текста: по ширине;
}
h4.
та] {
белое пространство: nowrap;
}
*/ 
та] {
белое пространство: nowrap;
}
*/ Мое первое предложение Мое второе предложение
Мое первое предложение Мое второе предложение
Мое первое предложение Мое второе предложение
Это сработало, если добавить margin-left:80px;. Итак, окончательный код —
<ч4> Мое первое предложение Мое второе предложение
Вы можете создавать разные столбцы, а затем выравнивать текст внутри них по левому краю.
.строка{
выравнивание текста: по левому краю;
ширина: 100%;
дисплей: блок;
}
.половина строки{
отображение: встроенный блок;
ширина: 48%;
набивка: 1%;
плыть налево;
}
.Чисто{
ясно: оба;
} <дел>
<дел>
Мое первое предложение
