Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Кнопка во всю высоту ячейки (https://javascript.ru/forum/xhtml-html-css/71028-knopka-vo-vsyu-vysotu-yachejjki.html)

fedushok 20.10.2017 10:48

Кнопка во всю высоту ячейки
 
Вложений: 1
Как сделать высоту кнопки от верхнего края верхнего input-а до нижнего края нижнего input-а?
Для ячеек задано: margin: 3px 0.
Картинка посередине кнопки.
border-collapse: collapse.
border: none.

ksa 20.10.2017 11:29

Цитата:

Сообщение от fedushok
Как сделать высоту кнопки от верхнего края верхнего input-а до нижнего края нижнего input-а?

А картинку куда? :)

fedushok 20.10.2017 11:43

Картинка <img> в кнопке. Причем посередине :-)

ksa 20.10.2017 11:52

fedushok, твою картинку проще организовать не таблицей. Использование именно таблицы обязательно?

P.S.
ХТМЛ кто за тебя делать будет? :)

fedushok 20.10.2017 11:58

Не так чтобы обязательно. Но желательно. Скорее это вопрос унификации кода. HTML сделаю. Его прямо сюда поместить?

ksa 20.10.2017 13:49

Цитата:

Сообщение от fedushok
HTML сделаю. Его прямо сюда поместить?

Да. :yes:
Только отформатируй и желательно с автозапуском. Вот описание этого...
http://javascript.ru/formatting

Цитата:

Сообщение от fedushok
Не так чтобы обязательно. Но желательно.

Вся проблема будет в самих контролах... :(
Поскольку поля и кнопки разные браузеры рисуют по-разному. :-E Т.ч. возможно придется их всех пихать в ДИВы и уже те ДИВы ставить как нужно...

fedushok 20.10.2017 16:22

table {
width: 100%;
border-collapse: collapse;
border: none;
}

table td {
padding: 3px 0;
text-align: left;
}

input {
    box-sizing: border-box;
    height: 22px;
}


<div style="width: 165px; border: 1px solid black">
    <table>
        <tr>
            <td style="text-align: right;"><label>раз ковбой:</label>
            </td>
            <td>
                <input type="text" name="n1" size="2em" value="" tabindex="1">
            </td>
            <td rowspan="2">
                <button type="button" style="width: 32px;">
                </button>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;"><label>два ковбой:</label>
            </td>
            <td>
                <input type="text" name="n2" size="2em" value="" tabindex="2">
            </td>
        </tr>
    </table>
</div>


Часовой пояс GMT +3, время: 10:52.