Как подровнять?

@Jambazi12 · Регистрация: 17.04.2013

Студворк — интернет-сервис помощи студентам

Подскажите, как подровнять поля для ввода данных. От длины слова перед полем , зависит и то насколько оно отодвинется (поле). Хотелось бы без использования таблицы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<!--[if lt IE 9]> <script src="//html5shiv.
googlecode.com/ svn/trunk/html5.js"></script>
<![endif]-->
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
 
<body><center>
    <h2>Регистрация</h2> 
    <div><label>Логин<input type="text" size="50" maxlength="20"></label></div>
    <div><label>Пароль<input type="password" size="50" maxlength="25"></label></div>
    <div><label>E-mail<input type="email" size="50" maxlength="40"></label></div>
</center></body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
a:link {
    color: darkblue;
}
 
a:visited {
    color: crimson;
}
 
a:hover {
    color: cornflowerblue;
}
 
a:active {
    color: gold;
    font-style: italic;
}
 
input {
    border-radius: 5px;
    margin-left: 25px;
}
 
input:focus {
    background-color: #FBFF6B;
}
 
div {
    clear: both;
    margin-top: 15px;
}

Qwerty_Wasd · 01.10.2018, 02:00

Jambazi12, Тег <center> устарел и в html5 не используется.

Сообщение от Jambazi12

Хотелось бы без использования таблицы

все равно какой-то упор для выравнивания инпутов нужен будет. Например - https://codepen.io/qwerty_wasd/pen/ZqGQBL

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="centered">
  <h2>Регистрация</h2>
  <div>
    <label for="text">Логин</label>
    <input id="text" type="text" size="50" maxlength="20"/>
  </div>
  <div>
    <label for="pass">Пароль</label>
    <input id="pass" type="password" size="50" maxlength="25"/>
  </div>
  <div>
    <label for="email">E-mail</label>
    <input id="email" type="email" size="50" maxlength="40"/>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.centered {
  text-align: center;
}
.centered div {
  margin-top: 15px;
}
.centered div label {
  display: inline-block;
  width: 100px;
}
.centered div input {
  -webkit-border-radius: 5px;
          border-radius: 5px;
  margin-left: 25px;
}
.centered div input:focus {
  background-color: #FBFF6B;
}

@Jambazi12 · 01.10.2018, 09:48 **[ТС]**

Сообщение от Qwerty_Wasd

-webkit-border-radius: 5px;
* * * * * border-radius: 5px;

Все понял, кроме зачем использовать одновременно эти 2 функции?

@SD163 · 01.10.2018, 09:54

Jambazi12, для разных браузеров

@Jambazi12 · 01.10.2018, 09:55 **[ТС]**

Сообщение от SD163

для разных браузеров

Спасибо. Кроссбраузерность еще не изучал. В учебнике до этого далеко)

@SD163 · 01.10.2018, 09:58

Jambazi12, изучить стоит сразу этот момент и адаптивность и UI. Стратегия будет совершенно другая.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 09:54
	Jambazi12, для разных браузеров 1

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 09:58
	Jambazi12, изучить стоит сразу этот момент и адаптивность и UI. Стратегия будет совершенно другая. 1