HTML-кнопка, заполняющая оставшуюся ширину - PullRequest
Новая
       2

HTML-кнопка, заполняющая оставшуюся ширину

2 голосов
/ 15 июля 2011

Я не эксперт по HTML, просто время от времени занимаюсь забавным программированием. Я пытаюсь сделать так, чтобы кнопка в «td» заполняла оставшуюся ширину как можно проще. 

<table width="100%">
<tr>
  <td>My Text</td>
  <td>
    <input name="x" id="y" type="text" size="4" maxlength="4" />
    <input type="button" onclick="..."  value="BlaBla" />
  </td>
</tr>
<tr>
  <td>Other Text</td>
  <td>
    <input name="xx" id="yy" type="text" size="20" />
    <input type="button" onclick="..."  value="MoreBlaBla" />
  </td>
</tr>
</table>

Я пробовал ширину 100%, но это дает мне дополнительную строку. Я проверил некоторые ответы, такие как Справка по div - приведите здесь div в соответствии с оставшейся шириной , но, поскольку я не являюсь экспертом в HTML, это становится слишком сложно. Думаю, есть очень простое решение.

Ответы [ 4 ]

1 голос
/ 15 июля 2011

Ну, это можно сделать с помощью JavaScript, но это не выглядит так здорово.

Выровненная по правому краю кнопка фиксированной ширины выглядит лучше ИМХО.

1 голос
/ 15 июля 2011

По сути, нет способа указать это, используя HTML + CSS. В какой-то момент почти все этого хотели, и его не существует.

Если вы придерживаетесь HTML + CSS, если у вас есть ширина, заданная каким-либо предсказуемым образом (либо фиксированной длины, либо в процентах), то вы можете рассчитать правильный процент (или другую меру), чтобы установить ширину кнопки. Это, наверное, лучший способ.

Если это невозможно, ваш следующий выбор - javascript (который вы должны дополнить хотя бы одной из множества библиотек, существующих в настоящее время, чтобы сделать использование javascript намного проще).

1 голос
/ 15 июля 2011

Попробуйте это: 

<tr>
<td>My Text</td>
<td>
    <input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
    <div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>
1 голос
/ 15 июля 2011

Попробуйте это 

<td>
                <input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
                <input type="button" onclick="..." style="float:left;width:70%"  value="BlaBla" />
    </td>
...