Ровно разместить инпуты

@Rodion2703 · Регистрация: 06.01.2013

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

Как сделать следующее:

1. Я ставлю в форму инпуты:

HTML5
1
2
3
4
5
6
<form>
    
    <p>Ваше имя: <input type="text" name="author" width="10px" /></p>
    <p>Ваш e-mail: <input type="text" name="mail" width="20px" /></p>    
    
</form>

Как сделать что бы конец каждого инпута был на одной ширине? Кроме варианта подбора.

(пробовал подбором, вот что получилось)

@Rodion2703 · 13.01.2013, 03:11 **[ТС]**

можно вопрос почти по этому (может быть тогда я смогу сам сделать)

Как узнать ширину текста? (jquery)

@SlavAz · 13.01.2013, 03:15

Rodion2703, обернуть его в элемент и смотреть его ширину. Вообще это какое-то извращенство CSS вполне справиться с шириной инпутов. Впрочем лучше смотреть в интернетах. Я никогда не прибегал к такого рода решениям.

@Rodion2703 · 13.01.2013, 03:23 **[ТС]**

Ну по логике можно: сделать у абзацов одинаковую ширину, узнать ширину текста и из ширины абзаца вычесть ширину текста и получаем ширину инпута(первого). Так же и со вторым абзацом. И получаем что у инпутов конец на одной ширине, вот:

Ваше имя: |______ инпут ______|
Ваша почта: |_____ почта______|

@SlavAz · 13.01.2013, 03:57

Во-первых избавься от

Определяет текстовый абзац. Тег является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

используй <label>
посмотри вот это

Добавлено через 3 минуты
ах... не решит по ссылке, надо думать.

@Rodion2703 · 13.01.2013, 04:06 **[ТС]**

Да label'ы давно добавил. А почему от ? Мне как раз надо с новой строки текст + инпут

@SlavAz · 13.01.2013, 04:19

Rodion2703, для перехода на новую строку используй

@Rodion2703 · 13.01.2013, 18:19 **[ТС]**

+ у меня еще margin на нем (на )

Легче ведь написать просто

HTML5
1
<p>Word</p>

, чем span там прописывать margin и тд

Добавлено через 13 часов 57 минут
Так как сделать?

@tgarl · 14.01.2013, 11:47

проще тогда, когда есть возможность настройки без изменения html
а такой вариант не подходит?

HTML5
1
2
3
4
5
6
7
8
9
10
<style>
form p {display:block; width:200px; overflow:hidden; padding:0; margin:0 0 1.5em 0;}
p input {width:100px; float:right;position:relative; margin-top:-5px;}
</style>
<form>
    
    <p><input type="text" name="author"/>Ваше имя: </p>
    <p><input type="text" name="mail"  />Ваш e-mail: </p>    
    
</form>

@newJS · 14.01.2013, 20:56

так устроит

HTML5
1
2
3
4
<div style="width:300px;">
<div><label style="width:100%; display:inline-block;">Ваше имя: <input type="text" name="author" style="float:right; width:73%;" /></label></div>
<div><label style="width:100%; display:inline-block;">Ваш e-mail: <input type="text" name="mail" style="float:right; width:70%;" /></label></div>
</div>

чтобы отлавливать это, существует валидатор width="20px", в атрибутах единицы измерения не ставят

@Rodion2703 · 14.01.2013, 21:13 **[ТС]**

Нет

@koza4ok · 14.01.2013, 22:04

CSS
1
input{vertical-align:middle|top|bottom }

@fvc · 15.01.2013, 18:45

HTML5
1
2
3
4
5
6
<form>
<fieldset style="position:relative; height:7em; width:15em;">
<p style="position:absolute; top:0; right:0;">Ваше имя<input type="text" size="20"></p>
<p style="position:absolute; top:1.5em; right:0;">Ваш email<input type="text" size="10"></p>
</fieldset>
</form>

@John1992on · 15.01.2013, 23:32

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

Как сделать что бы конец каждого инпута был на одной ширине? Кроме варианта подбора.

Я не понял что это значит. Напишите(нарисуйте) какую форму вам нужно(в итоге), и я скажу Вам как ее сделать. Также приведите HTML\CSS родительского блока для этой формы.

@Rodion2703 · 16.01.2013, 19:30 **[ТС]**

Там конец текстового поля должен находиться на одинаковой ширине

@John1992on · 16.01.2013, 21:12

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

Там конец текстового поля должен находиться на одинаковой ширине

Теперь понял, походу если вам нужны разной ширины инпуты то придется юзать js. Тем не менее странная нужда, нормально когда одинаковой ширины как http://www.w3schools.com/html/... html_input

Я сделал Вам с jQuery: http://jsfiddle.net/ALrSj/1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
 
<body>
 
<div class="container">
<form action="">
<span><p>Ваше имя:&nbsp;</p><input type="text" name="firstname"></span><br>
<span><p>Ваш e-mail:&nbsp;</p><input type="text" name="lastname"></span>
</form>
<!-- end .container --></div>
</body>
</html>

CSS
1
2
3
.container {padding:10px; border:black 1px solid; width:400px; float:left;}
.container form span {width:100%; position:relative; float:left; padding:5px 0;}
p {margin:0; padding:0; float:left;}

JavaScript
1
2
3
4
5
6
7
8
9
10
function ($) {
/* trigger when page is ready */
$(document).ready(function (){
    var formWidth = $('.container form').width();
    $('.container form span input').each(function(index, element) {
      var pWidth = $(this).prev('p').outerWidth();
      $(this).width(formWidth-pWidth-4);//"4" because <input> have a border
    });
    });
})(window.jQuery);

Новые блоги и статьи Все статьи Все блоги /
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 через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	13.01.2013, 03:11 [ТС]
	можно вопрос почти по этому (может быть тогда я смогу сам сделать) Как узнать ширину текста? (jquery) 0

@SlavAz ѪѦѢ 599 / 168 / 5 Регистрация: 19.08.2011 Сообщений: 665 Записей в блоге: 3
	13.01.2013, 03:15
	Rodion2703, обернуть его в элемент и смотреть его ширину. Вообще это какое-то извращенство CSS вполне справиться с шириной инпутов. Впрочем лучше смотреть в интернетах. Я никогда не прибегал к такого рода решениям. 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	13.01.2013, 03:23 [ТС]
	Ну по логике можно: сделать у абзацов одинаковую ширину, узнать ширину текста и из ширины абзаца вычесть ширину текста и получаем ширину инпута(первого). Так же и со вторым абзацом. И получаем что у инпутов конец на одной ширине, вот: Ваше имя: \|______ инпут ______\| Ваша почта: \|_____ почта______\| 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	13.01.2013, 04:06 [ТС]
	Да label'ы давно добавил. А почему от <p>? Мне как раз надо с новой строки текст + инпут 0

@SlavAz ѪѦѢ 599 / 168 / 5 Регистрация: 19.08.2011 Сообщений: 665 Записей в блоге: 3
	13.01.2013, 04:19
	Rodion2703, для перехода на новую строку используй <br /> 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	14.01.2013, 21:13 [ТС]
	Нет 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	16.01.2013, 19:30 [ТС]
	Там конец текстового поля должен находиться на одинаковой ширине Изображения 0