Как сдвинуть текст вправо в html: Как в html сдвинуть текст вправо? — Спрашивалка

html — Выравнивание тега label

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

Вопрос задан 7 лет 1 месяц назад

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

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

Нужно сделать так, чтобы все строки label начинались на том же уровне, что и первая строка. В данный момент вторая строка начинается под радиобаттоном, нужно сдвинуть её вправо до уровня начала первой строки.

<div data-ng-repeat="layer in listLayers">
  <label>
    <input type="radio" data-ng-model="layerSelect.id" value="269961" name="724">Test_test_test_test_test_test_test_test_test_test_test_ test_test_test_test_test_test_test_test_test_ (0)
  </label>
  <br>
</div>

• html
• css

8

label {
  display: block;
  padding-left: 16px;
  /* position is not required */
}

input {
  position: absolute;
  margin-left: -16px;
}

<label>
  <input type="radio" name="r">Текст
</label>
<label>
  <input type="radio" name="r">Ещё текст
</label>
<label>
  <input type="radio" name="r">Много много много текста. .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <input type="radio" name="r">Текст
</label>
<label>
  <input type="radio" name="r">Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста.
  .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <input type="radio" name="r">Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста.  .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>

Всё оказалось просто, разнёс на два отдельных тега и сделал флоат лефт с фиксацией ширины у лейбла

1

label {
  display: block;
  text-indent: -16px;
  padding-left: 16px;
}

span {
  text-indent: 0;
  display: inline-block;
  width: 16px;
  vertical-align: middle;
}

input {
  margin: 0;
}

<label>
  <span><input type="radio" name="r"></span>Текст
</label>
<label>
  <span><input type="radio" name="r"></span>Ещё текст
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста. .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <span><input type="radio" name="r"></span>Текст
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста. 
  .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста.
 
  .. Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>

1

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

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

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

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

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

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

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

Почта

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

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

Как сдвинуть текст вправо в html

Группа: User
Сообщений: 26
Регистрация: 8. 8.2008
Из: Россия, Уфа
Пользователь №: 2203

Вроде всё понял из ММ-1 и ММ-2, но вот вправо никак не могу текст сместить (то есть чтобы к правому краю браузера текст прилипал, а стандартно он слева ), а мне эта функция необходима. Пожалуйста, помогите

admin

Просмотр профиля

Группа: Главные администраторы
Сообщений: 8464
Регистрация: 6.12.2007
Пользователь №: 1

Профиль
Группа: Пользователь
Сообщений: 1
Пользователь №: 39745
На форуме:
Карма:

Подскажите, пожалуйста, как можно передвинуть html код с кнопками социализации Addthis вправо?
Пояснение здесь — https://dl.dropboxusercontent.com/u/4510117. %2007.49.46.png

Как мне нужно исправить код, чтобы кнопки передвинулись вправо?

Профиль
Группа: Пользователь
Сообщений: 6
Пользователь №: 40139
На форуме:
Карма:

Сообщений: 4155
Пользователь №: 38635
На форуме:
Карма: 223

Подписаться на тему
Уведомление на e-mail об ответах в тему, во время Вашего отсутствия на форуме.

Подписка на этот форум
Уведомление на e-mail о новых темах на форуме, во время Вашего отсутствия на форуме.

Скачать/Распечатать тему
Скачивание темы в различных форматах или просмотр версии для печати этой темы.

Меня не волнует шрифт или что-то еще, мне просто нужно, чтобы текст переместился в нужное положение.

• 2 будет полезно, если вы также включите CSS, который уже применили к этому HTML, чтобы мы могли избежать проблем с конфликтующими правилами.
• Один центрируется по вертикали, другой просто выравнивается по верху. Возможно, отрегулируйте диапазон, чтобы он не был встроенным, и тогда это может сработать. Возможно, потребуется немного отрегулировать его, например, с помощью vertical-align: top; или что-то
• Также разместите CSS и ссылку на полное изображение и т. Д. Теперь мы не можем с этим работать.
• отступ: нижний 20 пикселей;

В зависимости от того, что вы хотите, простой position: relative мог сделать свое дело.

Это при условии, что вы поместите оба своих span в div (или заголовок), имеющий класс logo .

При наведении, то есть hoverе, картинка затемняется и появляется блок с текстом. Все нормально. Но! Текст очень близко расположен к вверху и левой части блока. margin и padding не помогли. Так сам блок с текстом сместился.

Что использовать, чтобы текст сместить вниз чуть-чуть и вправо на 10px хотя бы?

используйте padding + box-sizing: border-box;

дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.7.41110

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

html — как переместить текст в правую часть страницы

Я пытаюсь переместить содержимое панели навигации в правую часть страницы, но оно не совпадает с заголовком панели навигации.

 * {
    маржа: 0;
    заполнение: 0;
    семейство шрифтов: Arial, Helvetica;
}
заголовок ли {
    стиль списка: нет;
    поплавок: справа;
    дисплей: встроенный;
    отступ: 20 пикселей;
   отступ слева: 3px;
}
заголовок {
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
   box-shadow: 0 1px 8px #ddd;
  
} 

 <заголовок>
 
 Dev101 
 
  <навигация>
 <ул>
          
О нас
          
Услуги
          
Контакты
 
  
  

• HTML
• CSS
• Flexbox

3

Вы можете добавить гибкость в заголовок:

 заголовок {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  box-shadow: 0 1px 8px #ddd;
}
 

Снимите поплавок . float устарели. Для выравнивания содержимого: пробел между; для работы нужно использовать display:flex; на том же элементе.

 * {
  маржа: 0;
  заполнение: 0;
  семейство шрифтов: Arial, Helvetica;
}
заголовок ли {
  стиль списка: нет;
  дисплей: встроенный;
  отступ: 20 пикселей;
  отступ слева: 3px;
}
заголовок {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  box-shadow: 0 1px 8px #ddd;
} 

 <заголовок>
   
 Dev101 
 
  <навигация>
    <ул>
      
О нас
      
Услуги
      
Контакты
    
  
 

0

Без использования какого-либо заполнения , в основном делая отзывчивым , попробуйте избегать , используя px на своих сайтах , так как это не очень хорошо для отзывчивости .

 
 Вместо  использовать   %  ,  рем  ,  em  .  
 
 * {
  маржа: 0;
  заполнение: 0;
  семейство шрифтов: Arial, Helvetica;
}
заголовок ли {
  стиль списка: нет;
  дисплей: встроенный;
}
заголовок ли {
  текстовое оформление: нет;
}
заголовок ли: hover {
  оформление текста: подчеркивание;
}
 
заголовок {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  box-shadow: 0 1px 8px #ddd;
}
заголовок навигации {
  ширина:40%;
}
заголовок навигации ул {
  дисплей: гибкий;
  по выравниванию содержимого: равномерно по пространству;
  выравнивание элементов: по центру;
} 
 <заголовок>
   
 Dev101 
 
  <навигация>
    <ул>
      
О нас
      
Услуги
      
Контакты
    
  
 
 Просто используйте  float  для выравнивания навигации по правому краю
 HTML:
 

   
Разработка420
 
 <навигация>
   <ул>
       
О нас
       
Услуги
       
Контакты
   
 

 
 CSS:
 навигация{
   поплавок: справа;
}
 
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 html — Как выровнять текст по правому краю с помощью пробела между flex box 
 Это мой HTML:
 . skillbox {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  ширина: 65%;
  маржа: авто;
  выравнивание элементов: по центру;
}
.skilltitle {
  выравнивание содержимого: flex-end;
  верхняя граница: авто;
  нижняя граница: авто;
  отступ справа: 20px;
  отступ слева: авто;
} 
 <дел>
  <дел>
     
Мои навыки