2013-08-04 58 views
0

我想知道如何將輸入框和按鈕放在同一行文本中(「每日新增更新直接發送到您的郵件」)。請幫助我。我附上了這條消息的代碼。提前感謝。如何將輸入框和按鈕放在同一行

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

+0

我也給了你小提琴,哪個瀏覽器使用? –

+0

Hey Sry bro!它工作正常。謝謝 :) –

相關問題