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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем whatever, 24 окт 2012.

  1. whatever

    whatever Гость

    Добрый день,

    Я не дизайнер и не верстальщик, я программист, но вот появилась необходимость сделать веб-интерфейс, и в качестве красивости для него выбор пал на twitter bootstrap.
    В общем для примера есть такая вот табличка:
    Код (Text):
    <!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 (в общем-то изначально для уменьшения размера текста) такой:
    Код (Text):
     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
     
Загрузка...

Поделиться этой страницей