如何合併HTML輸入框（訂閱框）和一個按鈕與響應？ （示例圖像附加）

Question

我是新來的網頁設計，我試圖創建模板，這是給我的任務...我想創建一個按鈕的訂閱輸入文本框。我把我的文件的一些截圖和代碼。請幫我解決

<section style="background-color: #ea6153"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
         <div class="subscribe-content-text"> 
          <h4>IF YOU WANT DAILY UPDATE OF OUR PRODUCT THEN JOIN AND SUBSCRIBE OUR NEWS LETTER</h4> 
         </div> 
        </div> 

       <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
        <div class="input-group subscribe-form"> 
         <input type="text" class="form-control input-lg" id="input-form" placeholder="Your Email here"> 
         <span><button class="btn subscribe-btn" type="button">SUBSCRIBE</button></span> 
        </div> 
       </div> 
       </div> 
      </div> 
     <section> 


    This is my CSS file: 


    .subscribe-content-text 
    { 
     font-size: 18px; 
     font-weight: bold; 
     font-family: Roboto, Serif; 
     color: #ffffff; 
     text-align: left; 
     margin-top: 75px; 
     margin-bottom:70px; 
    } 
    .subscribe-form 
    { 
     margin-top: 64px; 
    } 
    #input-form 
    { 
     border: 1px solid white; 
     border-radius: 0px; 
     background-color: #ea6153; 
     color: #ffffff; 

    } 
    input[type="text"] 
    { 
     color: #ffffff; 

    } 
    input::-webkit-input-placeholder 
    { 
     color:#ffffff !important; 
     font-size: 14px !important; 
     font-family: Roboto, Serif !important; 
    } 
    input::-moz-placeholder 
    { 
     color: #ffffff !important; 
     font-size: 14px !important; 
     font-family: Roboto, Serif !important; 
    } 

    .subscribe-btn 
    { 
     position: absolute; 
     background-color: #ffffff; 
     color: #ea6153; 
     font: 24px bold; 
     font-family: Roboto, Serif; 
     font-weight: bold; 
     border-style: none; 
     border-radius: inherit; 
    } 
    [This screenshot which i need to create in html responsive][1] 


    [This screenshot which i made in html**strong text**][2] 


     [1]: https://i.stack.imgur.com/B3qze.png 
     [2]: https://i.stack.imgur.com/AGvfr.png 

Answer 1

用下面的鏈接或代碼可能是它可以幫助你。

JSFiddle

HTML代碼 -

<section style="background-color: #ea6153"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
     <div class="subscribe-content-text"> 
      <h4>IF YOU WANT DAILY UPDATE OF OUR PRODUCT THEN JOIN AND SUBSCRIBE OUR NEWS LETTER</h4> 
     </div> 
     </div> 

     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
     <div class="form-group subscribe-form"> 
      <input type="text" class="form-control input-lg" id="input-form" placeholder="Your Email here"> 
      <button class="btn subscribe-btn" type="button">SUBSCRIBE</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <section> 

CSS代碼 -

.subscribe-content-text { 
    font-size: 18px; 
    font-weight: bold; 
    font-family: Roboto, Serif; 
    color: #ffffff; 
    text-align: left; 
    margin-top: 75px; 
    margin-bottom: 70px; 
} 

.subscribe-form { 
    margin-top: 64px; 
    position: relative; 
} 

#input-form { 
    border: 1px solid white; 
    border-radius: 0px; 
    background-color: #ea6153; 
    color: #ffffff; 
    position:relative; 
    padding: 0px 30% 0px 10px; 
} 

input[type="text"] { 
    color: #ffffff; 
} 

input::-webkit-input-placeholder { 
    color: #ffffff !important; 
    font-size: 14px !important; 
    font-family: Roboto, Serif !important; 
} 

input::-moz-placeholder { 
    color: #ffffff !important; 
    font-size: 14px !important; 
    font-family: Roboto, Serif !important; 
} 

.subscribe-btn { 
    position: absolute; 
    background-color: #ffffff; 
    color: #ea6153; 
    font: 24px bold; 
    font-family: Roboto, Serif; 
    font-weight: bold; 
    border-style: none; 
    border-radius: inherit; 
    position: absolute; 
    right: 5px; 
    top:3px; 
} 

Answer 2

/* 
 
Contact Form by html-form-guide.com 
 
You can customize all the aspects of the form in this style sheet 
 
All the style elements use form id selector(notice the #contactus). So, including this 
 
stylesheet does not affect the other elements at all! 
 
*/ 
 

 
#contactus fieldset 
 
{ 
 
    
 
    
 
    border:0px solid #ccc; 
 
-moz-border-radius: 10px; 
 
-webkit-border-radius: 10px; 
 
-khtml-border-radius: 10px; 
 
border-radius: 10px; 
 
} 
 

 
#contactus legend, h2 
 
{ 
 
\t font-family : Arial, sans-serif; 
 
\t font-size: 1em; 
 
\t font-weight: bold; 
 
\t color: #333; 
 
} 
 

 
#contactus label 
 
{ 
 
    font-family : Arial, sans-serif; 
 
    font-size:0.8em; 
 
    font-weight: bold; 
 
} 
 

 
#contactus input[type="text"],textarea 
 
{ 
 
    font-family : Arial, Verdana, sans-serif; 
 
    font-size: 0.8em; 
 
    line-height:140%; 
 
    color : #000; 
 
    padding : 3px; 
 
    border : 1px solid #999; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -khtml-border-radius: 5px; 
 
    border-radius: 5px; 
 

 
} 
 

 
#contactus input[type="text"] 
 
{ 
 
    height:18px; 
 
    width:120px; 
 
    
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    
 
} 
 

 
#contactus #scaptcha 
 
{ 
 
    width:60px; 
 
    height:18px; 
 
} 
 

 
#contactus input[type="submit"] 
 
{ 
 
    width:100px; 
 
    height:30px; 
 
    padding-left:0px; 
 
    
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
#contactus textarea 
 
{ 
 
    height:120px; 
 
    width:110px; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
} 
 

 
#contactus input[type="text"]:focus,textarea:focus 
 
{ 
 
    color : #009; 
 
    border : 1px solid #990000; 
 
    background-color : #ffff99; 
 
    font-weight:bold; 
 
} 
 

 
#contactus .containerF 
 
{ 
 
    
 
} 
 

 
#contactus .error 
 
{ 
 
    font-family: Verdana, Arial, sans-serif; 
 
    font-size: 0.7em; 
 
    color: #900; 
 
    background-color : #ffff00; 
 
} 
 

 
#contactus fieldset#antispam 
 
{ 
 
    padding:2px; 
 
    border-top:1px solid #EEE; 
 
    border-left:0; 
 
    border-right:0; 
 
    border-bottom:0; 
 
    
 
} 
 

 
#contactus fieldset#antispam legend 
 
{ 
 
    font-family : Arial, sans-serif; 
 
    font-size: 0.8em; 
 
    font-weight:bold; 
 
    color:#333; 
 
} 
 

 
#contactus .short_explanation 
 
{ 
 
\t font-family : Arial, sans-serif; 
 
\t font-size: 0.6em; 
 
\t color: #FFF; 
 
} 
 

 
/* spam_trap: This input is hidden. This is here to trick the spam bots*/ 
 
#contactus .spmhidip 
 
{ 
 
    display:none; 
 
    width:10px; 
 
    height:3px; 
 
} 
 
#fg_crdiv 
 
{ 
 
    font-family : Arial, sans-serif; 
 
    font-size: 0.3em; 
 
    opacity: .2; 
 
    -moz-opacity: .2; 
 
    filter: alpha(opacity=20); 
 
} 
 
#fg_crdiv p 
 
{ 
 
    display:none; 
 
}