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

whatever1 · 24.10.2012, 13:53

Добрый день,

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

Код HTML:

<!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 (в общем-то изначально для уменьшения размера текста) такой:

Код:

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).

rmv240899 · 25.10.2012, 11:45

Каждый инпут в отдельную ячейку, т.е. внутри каждой ячейки столбца Size должна быть таблица. Length в одной ячейке, инпут в другой. И так далее.

whatever1 · 25.10.2012, 13:09

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

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

MrJenika · 25.10.2012, 15:02

почему бы не сменить немного синтаксис инпутов на такой

Код:

<label for="length[2751]">Length:</label>
<input type="number" name="length[2751]" value="1" class="input-mini">

и уже самому label задать фиксированную ширину

whatever1 · 26.10.2012, 12:12

Спасибо. Может сработать, только для инпутов тогада еще ИД добавить нада. и количество хтмл кода вырастает. некритично конечно для современных ресурсов.

на текущий момент все решилось таким css:

Код:

tbody label {
    width: 128px;
    clear: right;
}
 
tbody input[type="text"],tbody input[type="number"] {
    height: 16px;
    margin-bottom: 2px;
    float: right;
}

Осталась только проблемка с тем, что IE раскукоживает последнюю колонку чуть ли ни на весь экран, так что для нее тож пришлось ширину принудительно поставить через стиль

Naive · 26.10.2012, 17:20

Цитата:

Я не дизайнер и не верстальщик, я программист

А я, как верстальшик, видимо не программист... оукэй, я тебя запомнил, парень...

А в данном примере путь джедая лежит через text-align:justify.

whatever1 · 26.10.2012, 22:06

Naive, извини если задел твои программистские чувства

Я в общем то хотел сказать, что в основном бекэндом занимаюсь.
Но тем не менее из любопытства поВикипедил:

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

создание кода веб-страницы с помощью соответствующего языка разметки(*). Таковыми могут быть, например, HTML, XHTML, XML.
оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

(*) Следует особо подчеркнуть, что язык разметки не является языком программирования.

Если вот сейчас не задел еще больше, то можешь поподробней про предложенный text-align:justify

. А то я что-то не пойму каки боком и где его прикрутить

25.10.2012, 15:02	#4
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	почему бы не сменить немного синтаксис инпутов на такой Код: `<label for="length[2751]">Length:</label> <input type="number" name="length[2751]" value="1" class="input-mini">` и уже самому label задать фиксированную ширину webinmd.com

26.10.2012, 12:12	#5
whatever1 Новичок Джуниор Регистрация: 24.10.2012 Сообщений: 4	Спасибо. Может сработать, только для инпутов тогада еще ИД добавить нада. и количество хтмл кода вырастает. некритично конечно для современных ресурсов. на текущий момент все решилось таким css: Код: `tbody label { width: 128px; clear: right; } tbody input[type="text"],tbody input[type="number"] { height: 16px; margin-bottom: 2px; float: right; }` Осталась только проблемка с тем, что IE раскукоживает последнюю колонку чуть ли ни на весь экран, так что для нее тож пришлось ширину принудительно поставить через стиль

26.10.2012, 22:06	#7
whatever1 Новичок Джуниор Регистрация: 24.10.2012 Сообщений: 4	Naive, извини если задел твои программистские чувства Я в общем то хотел сказать, что в основном бекэндом занимаюсь. Но тем не менее из любопытства поВикипедил: Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят: создание кода веб-страницы с помощью соответствующего языка разметки(). Таковыми могут быть, например, HTML, XHTML, XML. оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS () Следует особо подчеркнуть, что язык разметки не является языком программирования. Если вот сейчас не задел еще больше, то можешь поподробней про предложенный text-align:justify . А то я что-то не пойму каки боком и где его прикрутить

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Bootstrap carousel	mrgrudge	JavaScript, Ajax	1	26.10.2012 12:36
Создать заголовок Bootstrap используемый в DHCP для автоматического получения клиентом Ip адреса	Aliens_wolfs	Работа с сетью в Delphi	1	23.03.2012 14:51
Регистрация в twitter	kakawkin	Работа с сетью в Delphi	0	18.05.2011 09:47
Canvas.Font.Style := Label.Font.Style; не выходит	ArtGrek	Общие вопросы Delphi	3	23.02.2011 19:55
Подключение к twitter	Smagulov85	Работа с сетью в Delphi	6	13.01.2010 23:14

25.10.2012, 11:45	#2
rmv240899 Форумчанин Регистрация: 18.02.2012 Сообщений: 155	Каждый инпут в отдельную ячейку, т.е. внутри каждой ячейки столбца Size должна быть таблица. Length в одной ячейке, инпут в другой. И так далее.

25.10.2012, 13:09	#3
whatever1 Новичок Джуниор Регистрация: 24.10.2012 Сообщений: 4	Ну это же не спортивно. Верстка таблицами давно в прошлом По большему счету этим интерфейсом будет пользоваться ограниченное число людей, которым по барабану как там оно выровнено. Но для себя хотелось бы, что б все было красиво.