Как разместить поле ввода и кнопку в той же строке

Я хочу знать, как разместить поле ввода и кнопку в одной строке текста («Получайте свежие свежие обновления прямо на свою почту»). Пожалуйста, помогите мне. Я прикрепил код вместе с этим сообщением. Спасибо заранее.Как разместить поле ввода и кнопку в той же строке

<html> 
<head> 
<style> 
.rosyy{ 
color:#3e3e3e; 
font-family: Impact, sans-serif; 
font-size: 30px; 
font-weight: normal; 
line-height: 20px; 
padding: 10px 0 0 10px; 
text-shadow:0px 1px 0px #fff, 0px 2px 0px #C6C6C6; 
} 

.WG-91481wid { 
background: url(http://2.bp.blogspot.com/- ZRjmYjwpVLg/UOGBAUzNhrI/AAAAAAAAIc8/R6wrrCkJufI/s400/body.png); 
margin: 20px; 
border-radius: 10px 30px 10px 30px; 
width: 1000px; 
height: 90px; 
color: #fff; 
font-size: 14px; 
padding: 15px; 
transition:border-radius .5s; 
-webkit-transition:border-radius .5s; 
-moz-transition:border-radius .5s; 
} 
.WG-91481wid:hover{ 
border-radius:30px 10px 30px 10px; 
} 
.WG-91481wid p { 
width: 350px; 
line-height: 21px; 
} 

#subbox { 
background: white url(http://2.bp.blogspot.com/- dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat right; 
width: 200px; 
padding: 10px; 
color: #888; 
border: 1px soiid #222222; 
} 
#subbutton { 
background: #2aa4cf; 
color: #fff; 
border-radius: 5px 15px 5px 15px; 
height: 40px; 
border: 1px solid #292929; 
text-transform: uppercase; 
font-weight: bold; 
transition:border-radius .5s; 
-webkit-transition:border-radius .5s; 
-moz-transition:border-radius .5s; 
} 
#subbutton:hover { 
border-radius:15px 5px 15px 5px; 
} 

</style> 
</head> 

<body> 
<div class="WG-91481wid"> 
<div class="rosyy">Get Daily Fresh Updates Directly To Your Mail 

<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri=HotNewsOfIndia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> 
<input id="subbox" name="email" onblur="if (this.value == &#39;&#39;) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if (this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" value="Enter your email address..." type="text" /> 
<input name="uri" value="HotNewsOfIndia" type="hidden" /> 
<input name="loc" value="en_US" type="hidden" /> 
<input id="subbutton" value="Subscribe!" type="submit" /> 
</form> 


</div> 
</div> 
</body> 

</html>

источник

2013-08-04 Anand Selvaraj

всякий раз, когда вы пишете код, попробуйте написать его с углублениями. Это делает код легко читаемым, даже если он длинный. –

enter image description here Это результат, который я получил.
Просто попробуйте добавить текст внутри form tags как это: -

<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe"  method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri=HotNewsOfIndia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> 
    Get Daily Fresh Updates Directly To Your Mail 
    <input id="subbox" name="email" onblur="if (this.value == &#39;&#39;) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if (this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" value="Enter your email address..." type="text" /> 
    <input name="uri" value="HotNewsOfIndia" type="hidden" /> 
    <input name="loc" value="en_US" type="hidden" /> 
    <input id="subbutton" value="Subscribe!" type="submit" /> 
</form>

Это работает для меня. Я использую Chrome. Рабочий fiddle.

источник

2013-08-04 16:24:10

Что я дал и скрипке, какой браузер вы используете? –

Эй, брат! он отлично работает. Спасибо :) –

Как разместить поле ввода и кнопку в той же строке

ответ

Смежные вопросы