如何将输入框和按钮放在同一行

时间:2013-08-04 15:44:06

标签: html

我想知道如何将输入框和按钮放在同一行文本中(“直接获取每日新鲜更新到您的邮件”)。请帮帮我。我将代码与此消息一起附上。谢谢。

<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>

1 个答案:

答案 0 :(得分:1)

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