У меня возникли проблемы с получением формы 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%.
Я обычно помещал этот код на живой сайт для целей этого вопроса, но я не могу получить доступ к обычным сайтам из этой сети, поэтому извините.
Любая помощь будет принята с благодарностью.
Он идет ниже, потому что он плавает.
У вас есть фиксированная width
для input
и button
поэтому вы можете установить min-width
в контейнер:
#footer-newsletter form {
min-width:295px;
}
Пример http://jsfiddle.net/zX3F4/1/
Дайте ему родительский (form#newsletter
) минимальную ширину, когда размер экрана станет меньше этого размера, появятся полосы прокрутки.
#newsletter { min-width: 300px; }/*adjust to your needs */