如何调整表单内指定输入字段的样式与位置

Got it, let's tackle this form layout problem. You want the first three fields to stay in their current flex row, while Subject and Message take up full width on their own lines—here's a clean way to do this without breaking existing behavior:

Step 1: Update the HTML to Target Specific Fields #

First, we'll add a custom class to the Subject and Message form groups so we can style them separately. Also, I noticed you had duplicate id values on those inputs (they were using optin-company instead of their own unique IDs)—I fixed that too, since duplicate IDs are invalid HTML.

Modified HTML:

<div class="optin">
  <h3 class="optin__title">{{ .Site.Params.home.formtitle }}</h3>
  <form class="optin__form">
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-name" required>
      <label for="optin-name" class="optin__label">{{ .Site.Params.home.formname }}</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group">
      <input type="email" class="form-input optin__input" id="optin-email" required>
      <label for="optin-email" class="optin__label">{{ .Site.Params.home.formemail }}</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group">
      <input type="text" class="form-input optin__input" id="optin-company">
      <label for="optin-company" class="optin__label">{{ .Site.Params.home.formcompany }}</label>
      <span class="input-underline"></span>
    </div>
    <!-- Add custom class to these two groups -->
    <div class="optin__form-group form-group form-group--full-width">
      <input type="text" class="form-input optin__input" id="optin-subject">
      <label for="optin-subject" class="optin__label">{{ .Site.Params.home.formsubject }}</label>
      <span class="input-underline"></span>
    </div>
    <div class="optin__form-group form-group form-group--full-width">
      <input type="text" class="form-input optin__input" id="optin-message">
      <label for="optin-message" class="optin__label">{{ .Site.Params.home.formmessage }}</label>
      <span class="input-underline"></span>
    </div>
    <button class="optin__btn btn btn--md btn--color btn--button">{{ .Site.Params.home.formsubmit }}</button>
  </form>
</div>

Step 2: Adjust the CSS to Control Layout #

We'll make two key changes:

1. Add flex-wrap: wrap to the form container so it allows fields to wrap onto new lines when needed.
2. Create a rule for our new form-group--full-width class to force those fields to take up 100% of the container width, pushing them onto their own lines.

Modified CSS (add these rules to your existing styles):

.optin__form { 
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to new lines */
}

/* Force these groups to take full container width */
.form-group--full-width {
  flex: 1 0 100%; /* Grow to fill space, don't shrink, base width 100% */
  margin-right: 0; /* Remove right margin since they're full-width */
}

Why This Works #

• The original .optin .form-group rule keeps the first three fields as equal-width flex items, sitting in a row as long as there's space.
• flex-wrap: wrap on the form container tells flex items to move to a new line when they can't fit in the current row.
• The form-group--full-width class sets a base width of 100%, so those fields will always take up the entire row, forcing them to be on their own lines.

This approach avoids changing the form's display property entirely (your earlier display: relative attempt was incorrect—relative is a position value, not a display value!) and only targets the specific fields you want to adjust.

内容的提问来源于stack exchange，提问作者Eric Biggs