В квадрате в html: Тег | htmlbook.ru

Leave a Comment / Html / By /

html — Поместить цифру в квадрат

Задать вопрос

Вопрос задан

Изменён 4 года 7 месяцев назад

Просмотрен 1k раз

Не получается поместить цифру 5, как на рисунке в квадрат. Пробовала с помощью span, но что-то не так, в чём проблема?

.form-title-little {
  padding-top: 50px;
  font-size: 15px;
  font-weight: lighter;
}

.form-title-little span {
  width: 28px;
  height: 28px;
  border: 1px solid #7925ec;
  border-radius: 5px;
}
<div>
  Осталось всего <span>5</span> квартир!
</div>

  • html
  • css
  • css3
  • span

1 

. form-title-little {
  padding-top: 50px;
  font-size: 15px;
  font-weight: lighter;
}

.form-title-little span {
  box-sizing: border-box;
  padding: 10px 5px;
  display: inline-block;
  line-height: 0px;
  border: 1px solid #7925ec;
  border-radius: 5px;
}
<div>
  Осталось всего <span>5</span> квартир!
</div>

0

<span> — inline элемент и для того, чтоб ему установить ширину и высоту нужно его сделать inline-block

.form-title-little {
  padding-top: 50px;
  font-size: 15px;
  font-weight: lighter;
}

.form-title-little span {
  width: 28px;
  height: 28px;
  border: 1px solid #7925ec;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  line-height: 28px;
}
<div>
  Осталось всего <span>5</span> квартир!
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как расположить два квадрата в один ряд без отступа?

Задать вопрос

Вопрос задан

Изменён 6 лет 5 месяцев назад

Просмотрен 6k раз

Есть два квадрата: один черный, другой красный:

#black {
    height:50px;
    width:50px;
    background: #000;
}
#red {
    height:50px;
    width:50px;
    background: ##FF0000;
}

Когда я вывожу на страницу два квадрата:

<html> 
    <body>  
    <div></div>
    <div></div>
    </body>
</html>

то они естественно располагаются друг под другом (черный, а под ним красный), а мне надо их расположить друг за другом.

Как решить это?

  • html
  • css
#black {
    height:50px;
    width:50px;
    background: #000;
    float:left;
}
#red {
    height:50px;
    width:50px;
    background: ##FF0000;
    float:left;
}
<div>
     <div>Первый блок</div>
     <div>Второй блок</div>
</div>

добавить:

#black, #red {
    display:inline-block;
}

4

Вариант с display: table;

.wrapper {
  display: table;
}
.red {
  width: 100px;
  height: 100px;
  background: red;
  display: table-cell;
}
.blue {
  width: 100px;
  height: 100px;
  background: blue;
  display: table-cell;
}
<div>
  <div></div>
  <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML 4 Entities

❮ Предыдущий Далее ❯

Полная ссылка на объект HTML 4

Все объекты в таблице ниже будут правильно отображаться во всех браузерах, как в в HTML4 и на страницах HTML5.

Полный справочник по сущностям HTML5 см. в следующей главе.

Знак
Символ Субъект декабрь Шестнадцатеричный Описание
и &ампер; & & амперсанд
< < < < меньше
> > > > больше
        неразрывный пробел = неразрывный пробел
¡ !искл. ¡ ¡ перевернутый восклицательный знак
¢ % ¢ ¢ знак цента
£ фунтов; £ £ знак фунта
¤ &текущий; ¤ ¤ знак валюты
¥ иен; ¥ ¥ иен = знак юаня
¦ ¦ ¦ ¦ сломанный стержень = сломанный вертикальный стержень
§ &сек; § § Знак раздела
¨ ¨ ¨ ¨ диэрезис = интервал диэрезис
© &копия; © © знак авторского права
ª ª ª ª женский порядковый номер
« « « « указывающая влево двойная кавычка = указывающая влево гильеметр
¬ &нет; ¬ ¬ не подписывать
­ ­ ­ мягкий дефис = дискреционный дефис
® ® ® ® зарегистрированный знак = знак зарегистрированной торговой марки
¯ ¯ ¯ ¯ макрон = интервал макрон = верхняя черта = APL верхняя полоса
° &град; ° ° знак градуса
± ± ± ± знак плюс-минус = знак плюс-минус
² &up2; ² ² два надстрочных индекса = надстрочная цифра два = квадрат
³ &up3; ³ ³ верхний индекс три = верхний индекс три = в кубе
´ ´ ´ ´ острое ударение = пробел острое
µ &микро; µ µ микрознак
&пара; знак пилкроу = знак абзаца
· · · · средняя точка = грузинская запятая = греческая средняя точка
¸ &ced; ¸ ¸ седилья = интервальная седилья
№ &up1; ¹ ¹ верхний индекс один = верхний индекс один
º º º º мужской порядковый номер
» » » » Указывающая вправо двойная кавычка = указывающая вправо гильета
= ¼ ¼ ¼ вульгарная дробь одна четверть = дробь одна четверть
½ ½ ½ ½ вульгарная дробь одна половина = дробь одна половина
¾ ¾ ¾ ¾ вульгарная дробь три четверти = дробь три четверти
À ¿ ¿ ¿ перевернутый вопросительный знак = перевернутый вопросительный знак
À À À À латинская заглавная буква A с гравировкой = латинская заглавная буква
Á &Острый; Á Á латинская заглавная буква А с острым знаком
 &Окруж. ;   латинская заглавная буква А с циркумфлексом
à &Атильда; à à латинская заглавная буква А с тильдой
Ä Ä Ä Ä латинская заглавная буква А с диэрезисом
Å &Аринг; Å Å латинская заглавная буква A с кольцом вверху = латинская заглавная буква A кольцо
Æ Æ Æ Æ латинская заглавная буква AE = латинская заглавная лигатура AE
Ç Ç Ç Ç латинская заглавная буква C с седильей
È &Выгравировать; È È латинская заглавная буква E с гравировкой
É É É É латинская заглавная буква E с острым знаком
К Ê Ê Ê латинская заглавная буква E с циркумфлексом
Х Ë Ë Ë латинская заглавная буква Е с диэрезисом
М &Изображение; Ì Ì латинская заглавная буква I с гравировкой
Н Í Í Í латинская заглавная буква I с остротой
О Î Î Î латинская заглавная буква I с циркумфлексом
О Ï Ï Ï латинская заглавная буква I с диэрезисом
Р Ð Ð Ð латинская заглавная буква ETH
С &Nтильда; Ñ Ñ латинская заглавная буква N с тильдой
Т &Огрейв; Ò Ò латинская заглавная буква O с гравировкой
О Ó Ó Ó латинская заглавная буква О с острым знаком
Ô Ô Ô Ô латинская заглавная буква O с циркумфлексом
Х &Отильда; Õ Õ латинская заглавная буква O с тильдой
Ö &Омл; Ö Ö латинская заглавная буква О с диэрезисом
× × × × знак умножения
Ø &Ослэш; Ø Ø латинская заглавная буква O со штрихом = латинская заглавная буква O косая черта
Ù &Угр. ; Ù Ù латинская заглавная буква U с гравировкой
У Ú Ú Ú латинская заглавная буква U с острым знаком
О Û Û Û латинская заглавная буква U с циркумфлексом
О Ü Ü Ü латинская заглавная буква U с диэрезисом
О Ý Ý Ý латинская заглавная буква Y с острым знаком
Þ &ШИП; Þ Þ латинская заглавная буква THORN
ß ß ß ß латинская строчная буква диез s = ess-zed
и &грав; à à латинская строчная буква а с гравировкой = латинская строчная гравюра
á á á латинская строчная буква а с акут
— &acir; â â латинская строчная буква а с циркумфлексом
ã ã ã ã латинская строчная буква а с тильдой
ä ä ä ä латинская строчная буква а с диэрезисом
å å å å строчная латинская буква а с кольцом вверху = строчная латинская буква а кольцо
æ æ æ æ строчная латинская буква ae = строчная латинская лигатура ae
и ç ç ç латинская строчная буква с с седилью
и &грав; è è латинская строчная буква е с гравировкой
и é é é латинская строчная буква e с акутом
ê ê ê ê строчная латинская буква e с циркумфлексом
— ë ë ë латинская строчная буква е с диэрезисом
х ` ì ì латинская строчная буква i с гравировкой
и í í í латинская строчная буква i с акутом
î î î î латинская строчная буква i с циркумфлексом
ï ï ï ï латинская строчная буква i с диэрезисом
ð &эт; ð ð латинская строчная буква eth
– ñ ñ ñ латинская строчная буква н с тильдой
ò ò ò ò латинская строчная буква о с гравировкой
— ó ó ó латинская строчная буква о с акутом
х ô ô ô строчная латинская буква o с циркумфлексом
х õ õ õ латинская строчная буква о с тильдой
или &oml; ö ö латинская строчная буква о с диэрезисом
÷ &разделить; ÷ ÷ знак деления
ø &ослеш; ø ø строчная латинская буква o с чертой = строчная латинская буква o косая черта
ù ù ù ù латинская строчная буква у с гравировкой
ú ú ú ú латинская строчная буква u с акутом
х û û û латинская строчная буква u с циркумфлексом
ü ü ü ü латинская строчная буква u с диэрезисом
х ý ý ý латинская строчная буква y с акутом
+ &шип; þ þ латинская строчная буква шип
О ÿ ÿ ÿ латинская строчная буква y с диэрезисом
ƒ ƒ ƒ ƒ маленькая латинская f с крючком = функция = флорин
А &Альфа; Α Α греческая заглавная буква альфа
Б &Бета; Β Β греческая заглавная буква бета
Г &Гамма; Γ Γ греческая заглавная буква гамма
Δ &Дельта; Δ Δ греческая заглавная буква дельта
Ε &Эпсилон; Ε Ε греческая заглавная буква эпсилон
Ζ &Зета; Ζ Ζ греческая заглавная буква дзета
Η &Эта; Η Η греческая заглавная буква эта
Θ &Тета; Θ Θ греческая заглавная буква тета
Ι &Йота; Ι Ι греческая заглавная буква йота
К &Каппа; Κ Κ греческая заглавная буква каппа
Λ &лямбда; Λ Λ греческая заглавная буква лямбда
М &Мю; Μ Μ греческая заглавная буква мю
Н Ν Ν Ν греческая заглавная буква ню
Ξ Ξ Ξ Ξ греческая заглавная буква xi
О &Омикрон; Ο Ο греческая заглавная буква омикрон
Π &Пи; Π Π греческая заглавная буква пи
&Ро; Ρ Ρ греческая заглавная буква ро
        (не используется)
Σ &Сигма; Σ Σ греческая заглавная буква сигма
Т &Тау; Τ Τ греческая заглавная буква тау
Υ &Ипсилон; Υ Υ греческая заглавная буква ипсилон
Φ Φ Φ Φ греческая заглавная буква фи
х &Чи; Χ Χ греческая заглавная буква хи
Ψ Ψ Ψ Ψ греческая заглавная буква psi
Ом &Омега; Ω Ω греческая заглавная буква омега
        (не используется)
α &альфа; α α греческая строчная буква альфа
β &бета; β β греческая строчная буква бета
γ &гамма; γ γ греческая строчная буква гамма
дельта &дельта; δ δ греческая строчная буква дельта
ε &эпсилон; ε ε греческая строчная буква эпсилон
ζ &дзета; ζ ζ греческая строчная буква дзета
η &эта; η η греческая строчная буква эта
θ &тета; θ θ греческая строчная буква тета
и ι ι ι греческая строчная буква йота
κ &каппа; κ κ греческая строчная буква каппа
λ λ λ λ греческая строчная буква лямбда
μ мкм; μ μ греческая строчная буква мю
ν ν ν ν греческая строчная буква ню
ξ ξ ξ ξ греческая строчная буква xi
или &омикрон; ο ο греческая строчная буква омикрон
№ π π π греческая строчная буква пи
р ρ ρ ρ греческая строчная буква ро
ς &сигмаф; ς ς греческая строчная буква последняя сигма
о &сигма; σ σ греческая строчная буква сигма
т &тау; τ τ греческая строчная буква тау
х υ υ υ греческая строчная буква ипсилон
φ φ φ φ греческая строчная буква фи
х &чи; χ χ греческая строчная буква хи
ψ ψ ψ ψ греческая строчная буква psi
ω &омега; ω ω греческая строчная буква омега
        (не используется)
ϑ &тетасимвол; ϑ ϑ греческая строчная буква тета символ
ϒ ϒ ϒ ϒ Греческий ипсилон с символом крюка
        (не используется)
ϖ ϖ ϖ ϖ Греческий символ пи

Специальные символы

.
Символ Субъект декабрь Шестнадцатеричный Описание
• &бык; • • пуля = черный маленький круг
… … … … горизонтальное многоточие = выноска из трех точек
′ ′ ′ ′ штрих = минуты = футы
″ &Прайм; ″ ″ двойной штрих = секунды = дюймы
‾ &олайн; ‾ ‾ надчеркивание = надчеркивание интервала
⁄ ⁄ ⁄ ⁄ косая черта дроби
℘ ℘ ℘ ℘ заглавная буква P = набор мощности = Weierstrass p
ℑ &изображение; ℑ ℑ заглавная буква I = мнимая часть
ℜ &реальный; ℜ ℜ черная заглавная буква R = символ реальной части
™ &торговля; ™ ™ знак товарного знака
ℵ ℵ ℵ ℵ символ алеф = первый трансфинитный кардинал
← ← ← ← стрелка влево
↑ ↑ ↑ ↑ стрелка вверх
→ → → → стрелка вправо
↓ ↓ ↓ ↓ стрелка вниз
↔ ↔ ↔ ↔ стрелка влево вправо
↵ ↵ ↵ ↵ стрелка вниз с углом влево = возврат каретки
⇐ ⇐ ⇐ ⇐ двойная стрелка влево
⇑ ⇑ ⇑ ⇑ двойная стрелка вверх
⇒ ⇒ ⇒ ⇒ двойная стрелка вправо
⇓ ⇓ ⇓ ⇓ двойная стрелка вниз
⇔ ⇔ ⇔ ⇔ двойная стрелка влево-вправо
∀ ∀ ∀ ∀ для всех
∂ ∂ ∂ ∂ частичный дифференциал
∃ &существовать; ∃ ∃ существует
∅ &пусто; ∅ ∅ пустой набор = нулевой набор = диаметр
∇ &набла; ∇ ∇ набла = обратная разница
∈ ∈ ∈ ∈ элемент
∉ ∉ ∉ ∉ не является элементом
∋ ∋ ∋ ∋ содержит в качестве члена
∏ ∏ ∏ ∏ n-арный продукт = знак продукта
∑ &сумма; ∑ ∑ n-арное суммирование
− &минус; − − знак минус
∗ ∗ ∗ ∗ оператор звездочки
√ &радикальный; √ √ квадратный корень = знак радикала
∝ ∝ ∝ ∝ пропорционально
∞ &бесконечный; ∞ ∞ бесконечность
∠ ∠ ∠ ∠ угол
∧ &и; ∧ ∧ логический и = клин
∨ &или; ∨ ∨ логическое или = vee
∩ &крышка; ∩ ∩ пересечение = крышка
∪ ∪ ∪ ∪ штуцер = чашка
∫ ∫ ∫ ∫ встроенный
∴ &здесь4; ∴ ∴ поэтому
~ ∼ ∼ ∼ оператор тильды = зависит от = аналогично
≅ ≅ ≅ ≅ примерно равно
≈ ≈ ≈ ≈ почти равно = асимптотически
≠ ≠ ≠ ≠ не равно
≡ &эквивалент; ≡ ≡ идентичен
≤ ≤ ≤ ≤ меньше или равно
≥ ≥ ≥ ≥ больше или равно
⊂ ⊂ ⊂ ⊂ подмножество
⊃ &up; ⊃ ⊃ надмножество
⊄ ⊄ ⊄ ⊄ не является подмножеством
⊆ ⊂ ⊆ ⊆ подмножество или равно
⊇ ⊇ ⊇ ⊇ надмножество или равно
⊕ + ⊕ ⊕ обведено плюс = прямая сумма
⊗ ⊗ ⊗ ⊗ обведенных раз = векторное произведение
⊥ % ⊥ ⊥ закрепка = ортогонально = перпендикулярно
⋅ ⋅ ⋅ ⋅ точечный оператор
⌈ ⌈ ⌈ ⌈ левый потолок = APL наверху
⌉ ⌉ ⌉ ⌉ правый потолок
⌊ &нижний этаж; ⌊ ⌊ левый этаж = APL внизу
⌋ ⌋ ⌋ ⌋ правый этаж
〈 &язык; 〈 〈 левый угловой кронштейн = бюстгальтер
〉 &ранг; 〉 〉 угловой кронштейн, направленный вправо = ket
◊ ◊ ◊ ◊ леденец
♠ ♠ ♠ ♠ черный пиковый костюм
♣ &клубы; ♣ ♣ черный клубный костюм = трилистник
♥ &сердца; ♥ ♥ 92, поэтому квадрат меньше и расположен вверху.

Есть идеи, как этого добиться?

1

Попробуйте это:

 22

2

Вы можете использовать ² html объект:

 2²

Отображается как «2²».

Он называется Верхний индекс и есть небольшая разница в его использовании с тегом и непосредственно с использованием символа Unicode под названием « Superscript Two »:

HTML-тег: 22 = 2 2

HTML сущность: (см. разницу) 2² = 2²

 Кодировки:
Объект HTML (десятичный) ²
Объект HTML (шестнадцатеричный) ²
Объект HTML (имя) ²
Окна Alt + B2
                                   Альт 0178
                                   Альт 253
UTF-8 (шестнадцатеричный) 0xC2 0xB2 (c2b2)
UTF-8 (двоичный) 11000010:10110010
UTF-16 (шестнадцатеричный) 0x00B2 (00b2)
UTF-16 (десятичное) 178
UTF-32 (шестнадцатеричный) 0x000000B2 (b2)
UTF-32 (десятичное) 178
Исходный код C/C++/Java "\ u00B2"
Исходный код Python u"\u00B2"

Ссылка на формат файла

https://developer. mozilla.org/en-US/docs/Web/HTML/Element/sup
http://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts

1

Вам нужен надстрочный тег.

 22

Это выводит 2 2

1

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

HTML (пример) 

 
22

CSS 

 .superscript {
    размер шрифта: 0.4em;
    высота строки: 1.2em;
    вертикальное выравнивание: сверху;
    положение: родственник;
}

Здесь вы можете увидеть этот пример, работающий в JSFiddle.

Вы можете использовать символ Юникода «верхний индекс 2» (элемент HTML ² или ²), например.

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

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