Проблема с CSS при перемещении формы при изменении размера

0

У меня возникли проблемы с получением формы btn, чтобы оставаться справа от связанного с ней ввода формы. Это нормально, когда браузер имеет соответствующий размер, однако, когда браузер уменьшается, этот бит переходит на строку ниже ввода, а не остается налево. Я пробовал почти все, что мог придумать, но я не могу остановить его от перемещения, когда окно сокращается.

Любая помощь будет принята с благодарностью.

Вот css:

#footer-newsletter form {
display: block;
vertical-align: baseline;
}
#footer-newsletter input {
display: inline;
width: 231px;
height: 19px;
background: #202020;
border:0;
margin:0;
padding:10px;
color: #A5A5A5;
font-size: 0.85em;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;    
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
float:left;
border-radius:0
}
#footer-newsletter button {
display: inline;
width:39px;
float:right;
height:39px;
text-indent:-9999em;
background:#202020 url(images/newsletter_arrow.png) no-repeat center center;
border:0;
margin-left:1px;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
}

Вот html:

<!-- BEGIN .four columns right #footer-newsletter -->
    <div class="four columns right" id="footer-newsletter">
        <h3>Newsletter</h3>
    <p>Occasional email updates, no spam</p>
    <form id="newsletter" method="post" action="http://innervisionsoftware.co.uk/wp-content/plugins/newsletter/do/subscribe.php" onsubmit="return newsletter_check(this)">
        <input id="email" type="email" name="newsletter" value="Your email address" required>
        <button type="submit">Submit</button>
    </form>
    </div>
    <!-- END .four columns right #footer-newsletter -->

Контейнер представляет собой просто ширину пестика для большего контейнера, который составляет 100%.

Я обычно помещал этот код на живой сайт для целей этого вопроса, но я не могу получить доступ к обычным сайтам из этой сети, поэтому извините.

Любая помощь будет принята с благодарностью.

Теги:
forms

2 ответа

1
Лучший ответ

Он идет ниже, потому что он плавает.

У вас есть фиксированная width для input и button поэтому вы можете установить min-width в контейнер:

#footer-newsletter form {
   min-width:295px;
}

Пример http://jsfiddle.net/zX3F4/1/

  • 1
    ссылка на домашнюю страницу JSFiddle ...
  • 0
    Спасибо, высоко ценится. :-)
1

Дайте ему родительский (form#newsletter) минимальную ширину, когда размер экрана станет меньше этого размера, появятся полосы прокрутки.

#newsletter { min-width: 300px; }/*adjust to your needs */

  • 0
    Спасибо за вашу помощь :-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню