Не удается заставить CSS заменить таблицу (2 ячейки, справа с шириной = 1) - PullRequest
Новая
       12

Не удается заставить CSS заменить таблицу (2 ячейки, справа с шириной = 1)

1 голос
/ 25 июня 2011

Да, я знаю, что это похоже на тот же вопрос еще раз, но дай мне шанс ... Я пытаюсь создать что-то похожее на поле адреса http и кнопку "go":

[поле ввода - ширина всего окна минус размер правой кнопки] [кнопка перехода]

Очень просто с таблицей (работает с <form> и полями ввода тоже) 

<table width="100%"><tr>
<tr>
<td>free text goes in here and takes as much space as available! free text goes in here and takes as much space as available!</td>
<td width="1"><a href="">GO</a></td>
</tr></table>

Прежде чем ответить, обратите внимание, что для успеха CSS важно НЕ устанавливать фиксированную ширину кнопки GO! Я знаю, как сделать это в CSS с фиксированной шириной вправо, но ... Это будет означать, что если текст «GO» изменится на «RUN» или шрифт изменится, мне придется вручную установить ширину фиксированная правая часть. Это делает бессмысленным весь смысл CSS (IMNSHO), особенно если стол достаточно умен, чтобы сделать это.

1 Ответ

2 голосов
/ 25 июня 2011

Демонстрационная скрипка

HTML: 

<form action="">
    <fieldset>
        <button type="submit">GO</button>
        <span>
            <input type="text" />
        </span>
    </fieldset>
</form>

CSS: 

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
button {
    float: right;
}
span {
    display: block;
    overflow: hidden;
    padding-right: 10px;
}
input {
    width: 100%;
}

Протестировано на Win7 в IE7, IE8, IE9, Opera 11, Chrome 12, FF 4, SafariWin 5.

Благодаря недавнему пересмотру тридцатки .

...