Не могу выровнять инпуты (twitter bootstrap + own style)

24.10.2012, 13:44. **Показов** 3079. **Ответов** 4

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

Добрый день,

Я не дизайнер и не верстальщик, я программист, но вот появилась необходимость сделать веб-интерфейс, и в качестве красивости для него выбор пал на twitter bootstrap.
В общем для примера есть такая вот табличка:

HTML5
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystyle.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <form action="process.php" method="post">
        <div class="controls">
            <input type="submit" class="btn btn-primary" value="Export CSV" name="export">
            <input type="submit" class="btn btn-danger" value="Remove from the list" name="delete">
        </div>
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th id="check-all-cell"></th>
                    <th>PO#</th>
                    <th>Date</th>
                    <th>Buyer</th>
                    <th>Business name</th>
                    <th>Address</th>
                    <th>E-mail</th>
                    <th>Phone</th>
                    <th>Payment method</th>
                    <th>Payment</th>
                    <th>Weight<small> (kg)</small></th>
                    <th>Size<small> (cm)</small></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="invoices[]" checked="checked" value="2750"></td>
                    <td>GKOZ #2750</td>
                    <td>2012-10-18</td>
                    <td>Mrs Debra Connell</td>
                    <td>Some buiseness name</td>
                    <td>Some street<br>City, ST<br>0000<br>Mars</td>
                    <td>some1@example.com</td>
                    <td>Phone: 0000000000</td>
                    <td>Credit Card</td>
                    <td>Subtotal: 53.90<br>Freight: 19.95<br>Total: 73.85</td>
                    <td><input type="text" name="weight[2750]" value="1.1" class="input-mini"></td>
                    <td>
                        <label>Length: <input type="number" name="length[2750]" value="1" class="input-mini"></label>
                        <label>Width:  <input type="number" name="width[2750]" value="10" class="input-mini"></label>
                        <label>Height: <input type="number" name="height[2750]" value="1" class="input-mini"></label>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="invoices[]" checked="checked" value="2751"></td>
                    <td>GKOZ #2751</td>
                    <td>2012-10-19</td>
                    <td>Ms Fiona Hamblin</td>
                    <td></td>
                    <td>PO Box 573<br>Sometown, BB<br>4895<br>Venus</td>
                    <td>some2@example.com</td>
                    <td>Phone: 9876543210<br>Mobile 0123456789</td>
                    <td>Credit Card</td>
                    <td>Subtotal: 109.00<br>Freight: 14.95<br>Total: 128.95</td>
                    <td><input type="text" name="weight[2751]" value="1.1" class="input-mini"></td>
                    <td>
                        <label>Length: <input type="number" name="length[2751]" value="1" class="input-mini"></label>
                        <label>Width: <input type="number" name="width[2751]" value="1" class="input-mini"></label>
                        <label>Height: <input type="number" name="height[2751]" value="1" class="input-mini"></label>
                    </td>
               </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

mystyle.css (в общем-то изначально для уменьшения размера текста) такой:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
tbody label,tbody input[type="text"],tbody input[type="number"],tbody {
    font-size: 12px;
}
 
tbody label {
    width: 128px;
}
 
tbody input[type="text"],tbody input[type="number"] {
    height: 16px;
    margin-bottom: 2px;
 
}

Что я хочу - в последней колонке три инпута, как бы их выровнять под линеечку?
Сейчас это выглядит как на картинке1.
Мне почему-то казалось, что нужно всего лишь добавить float: right инпутам, но это приводит к абсолютно необъяснимым для меня результатам, причем в разных браузера по разному (картинка 2).

@Proffessional · 25.10.2012, 03:19

Попробуйте сделать таблицу с двумя колонками и тремя строками. В каждой строке пара подпись-поле. Это самый верный вариант, я пологаю

25.10.2012, 11:01

Ну это же не спортивно. Верстка таблицами давно в прошлом

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

@Proffessional · 25.10.2012, 14:01

whatever1, вёрстка таблицами - в прошлом?

Есть очень много случаев когда без таблиц не обойтись, и это нормально. Как вы, хотя бы, будете делать центрирование блока по странице?

KOPOJI · 25.10.2012, 14:08

Не по теме:

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

Как вы, хотя бы, будете делать центрирование блока по странице

если фиксированный размер блока - то без проблем

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Proffessional Особый статус 743 / 145 / 6 Регистрация: 16.07.2009 Сообщений: 2,185 Записей в блоге: 1
	25.10.2012, 03:19
	Попробуйте сделать таблицу с двумя колонками и тремя строками. В каждой строке пара подпись-поле. Это самый верный вариант, я пологаю 0

whatever1
	25.10.2012, 11:01
	Ну это же не спортивно. Верстка таблицами давно в прошлом По большему счету этим интерфейсом будет пользоваться ограниченное число людей, которым по барабану как там оно выровнено. Но для себя хотелось бы, что б все было красиво.

@Proffessional Особый статус 743 / 145 / 6 Регистрация: 16.07.2009 Сообщений: 2,185 Записей в блоге: 1
	25.10.2012, 14:01
	whatever1, вёрстка таблицами - в прошлом? Есть очень много случаев когда без таблиц не обойтись, и это нормально. Как вы, хотя бы, будете делать центрирование блока по странице? 0