如何合并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
{
	font-family : Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	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
{
	font-family : Arial, sans-serif;
	font-size: 0.6em;
	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;
}