0
<form method="get" id="searchform" action="/">
    <input type="text" value="<?php the_search_query(); ?>" placeholder="Для поиска напишите нужное слово или словосочетание" name="s" id="s" class="findText" />
    <input type="submit" id="searchsubmit" value="Найти" class="findButton" />
</form>

.findButton {
    background: #FFF;
    padding: 6px 10px 6px 9px;
    border: 1px solid #DADADA;
    margin-left: 6px;
    cursor: pointer;
}

.findText {
    padding: 6px 8px 6px 8px;
    background: #FFFFFF;
    border: 1px solid #DADADA;
}

Мне нужно, чтобы findText растягивался в зависимости от экрана, а findButton был с правой стороны и всегда одного размера.

2 ответа 2

1

Вариант 1. Придётся следить что-бы 20% от родительского блока было не меньше 50px (цифры можно подгонять). Должно работать везде.

.findButton {
    background: #FFF;
    padding: 6px 10px 6px 9px;
    border: 1px solid #DADADA;
    margin-left: 6px;
    cursor: pointer;
    width: 50px;
}

.findText {
    padding: 6px 8px 6px 8px;
    background: #FFFFFF;
    border: 1px solid #DADADA;
    width: 80%;
}

Вариант 2. Использовать функцию calc() (поддерживается в современных браузерах, IE до 10 в пролёте, придётся деградировать до первого варианта)

.findButton {
    background: #FFF;
    padding: 6px 10px 6px 9px;
    border: 1px solid #DADADA;
    margin-left: 6px;
    cursor: pointer;
    width: 50px;
}

.findText {
    padding: 6px 8px 6px 8px;
    background: #FFFFFF;
    border: 1px solid #DADADA;
    width: calc(100% - 79px);
}

79px это 50px на .findButton и ещё 29 на маргины, паддинги и прочие шероховатости (вроде столько нужно)

P.S. Ну и пример, раз-уж так принято http://jsfiddle.net/PZguP/1/

0

http://jsfiddle.net/A52X7/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.