Не Могу Выровнять Инпуты

  • Автор темы whatever
  • Дата начала
W

whatever

#1
Добрый день,

Я не дизайнер и не верстальщик, я программист, но вот появилась необходимость сделать веб-интерфейс, и в качестве красивости для него выбор пал на twitter bootstrap.
В общем для примера есть такая вот табличка:
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.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>1234<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).
Туже самое на jsFiddle
screen1.png
screen2.png
 

Вложения