表格输入，底部边框延伸到div的末尾而不移动文本

Question

尝试将红线延伸到彩色div的末尾。
但如果我将宽度设为100％，它会将输入标签推到文本下方，有没有办法在没有单独宽度属性的情况下执行此操作

＆＃13;

＆＃13;

#contact-heading{
    color: #838386;
    font-weight: bold;

}
.contactForm{
    background-color: #b7dcd8;
    margin-right: 30%;
    padding: 2% 0 0 2%;

    font-family: Serif;
    font-size: 12pt;
}
.formtitle{
    border: none;
}
.forminput{
    border: none;
    border-bottom: 2px solid red;
    background-color: #b7dcd8;
}

＆＃13;

<div class="contact-main">
    <div class="container">
    <h1 id="contact-heading">CONTACT US</h1>
    </div>
    <div class="container">
        <form class="contactForm">
            <p class="formtitle">FIRST NAME:<input class="forminput"></p> <br>
            <p class="formtitle">YOUR EMAIL: <input class="forminput"></p> <br>
            <p class="formtitle">CONFIRM EMAIL: <input class="forminput"></p> <br>
            <p class="formtitle">CONTACT NUMBER: <input class="forminput"></p> <br>
            <p class="formtitle">SUBJECT: <input class="forminput"> <br></p>
            <br>
            YOUR QUERY:<br>
            <textarea cols="50" rows="7"></textarea>
            <br>
            <br>


            <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
            <br>
            <input type="reset">
            <input type="submit">
        </form>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在段落

上使用定位的伪元素

#contact-heading {
  color: #838386;
  font-weight: bold;
}
.contactForm {
  background-color: #b7dcd8;
  margin-right: 30%;
  padding: 2% 0 0 2%;
  font-family: Serif;
  font-size: 12pt;
}
.formtitle {
  border: none;
  position: relative;
  overflow: hidden;
  /* required */
}
.formtitle::after {
  content: '';
  width: 100vw;
  height: 0px;
  border-bottom:2px solid red;
  position: absolute;
  bottom:1px;
}
.forminput {
  border: none;
  border-bottom: 2px solid red;
  background-color: #b7dcd8;
}

<div class="contact-main">
  <div class="container">
    <h1 id="contact-heading">CONTACT US</h1>
  </div>
  <div class="container">
    <form class="contactForm">
      <p class="formtitle">FIRST NAME:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">YOUR EMAIL:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">CONFIRM EMAIL:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">CONTACT NUMBER:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">SUBJECT:
        <input class="forminput">
        <br>
      </p>
      <br>YOUR QUERY:
      <br>
      <textarea cols="50" rows="7"></textarea>
      <br>
      <br>


      <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
      <br>
      <input type="reset">
      <input type="submit">
    </form>
  </div>
</div>

Answer 2

为输入提供 Label 元素会更好。 如果您希望输入也是100％，不仅是边框，您可以使用 display：table

＆＃13;

＆＃13;

#contact-heading{
color: #838386;
font-weight: bold;

}
.contactForm{
background-color: #b7dcd8;
margin-right: 30%;
padding: 2% 0 0 2%;

font-family: Serif;
font-size: 12pt;
}
.formtitle{
border: none;
}
.forminput{
border: none;
border-bottom: 2px solid red;
background-color: #b7dcd8;
display: table-cell;
width: 100%;
}
.formtitle {
    display: table;
    width: 100%;
}
.label-text {
    display: table-cell;
    width: 10%;
    white-space: nowrap;
}

＆＃13;

<div class="contact-main">
    <div class="container">
        <h1 id="contact-heading">CONTACT US</h1>
    </div>
    <div class="container">
        <form class="contactForm">
            <p class="formtitle">
                
            <label class="formtitle">
                    <span class="label-text">YOUR EMAIL:</span>
                <input class="forminput">
            </label>

            <label class="formtitle">
                    <span class="label-text">CONFIRM EMAIL</span>
                <input class="forminput">
            </label>

            <label class="formtitle">
                    <span class="label-text">SUBJECT:</span>
                <input class="forminput">
            </label>
            
            YOUR QUERY:<br>
            <textarea cols="50" rows="7"></textarea>
            <br>
            <br>


            <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
            <br>
            <input type="reset">
            <input type="submit">
        </form>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;