html - 如何合并 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]: /image/B3qze.png
      [2]: /image/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;
}