如何使用flex對齊表單資訊

我只需要使用 flex 來做到這一點，但我在正確對齊標簽和輸入欄位時遇到了一些困難。這就是最終結果應該看起來的樣子。

任何幫助，將不勝感激！

<form>
                            <div class="details">
                                <label for="email">E-mail:</label>
                                <input type="email" id="email" name="email">
                            </div>
                            <div class="details">
                            <label for="tel">Telephone Number:</label>
                            <input type="tel" id="tel" name="tel">
                            </div>
                            <div class="details">
                                <label for="position">Position:</label>
                                <input type="text" id="position" name="position">
                                <input type="radio" name="availability" id="Part-Time" value="Part-Time">
                                <label for="radio">Part-Time</label>
                                <input type="radio" name="availability" id="Full-Time" value="Full-Time">
                                <label for="radio">Full-Time</label> 
                            </div>
                            <div class="details">
                                <label for="date">Date:</label>
                                <input type="date" id="date" name="date">
                                <input type="checkbox" name="AM" id="AM" value="AM">
                                <label for="checkbox">AM</label>
                                <input type="checkbox" name="PM" id="PM" value="PM">
                                <label for="radio">PM</label>
                            </div>
                            <div class="details">
                                <label for="yearsofexperience">Years of Experience:</label>
                                <input type="text" id="yearsofexperience" name="yearsofexperience">
                            </div>
                            <div class="details">

                            </div>
                            <div class="details">
                                <label for="experience">Experience:</label>  
                                <textarea name="experience" id="experience" rows="1" cols="20">Worked 5 years at Bayshore Veterinarian Services</textarea>
                            </div>
                            <div class="details">
                                <input type="submit" value="Apply Now">
                            </div>
                            
                    </form>

我已經嘗試了各種各樣的事情，但我無法讓他們排隊。我試過有兩列，其中第 1 列包含標簽，而另一列包含輸入欄位，但我沒有成功。

uj5u.com熱心網友回復：

我寫了一些 CSS 來創建所需的布局。它無需更改提供的 HTML 即可作業。

不過，您可以添加name影像中缺少的輸入。

選擇“.details > input:first-child立即應用”按鈕并設定一個margin-left: calc(25% 6px)，因此它有一個與標簽匹配的左側空間，并與其他輸入對齊。

不過，您不妨考慮使用實際<button>標簽進行提交。如果稍后這樣做，您可以將此選擇器更改為.details > button:first-child.

希望這會有所幫助！

例子：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

form {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 30px;
}

.details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}

.details > label:first-child {
  width: 25%;
  display: flex;
  justify-content: flex-end;
}

.details > input#date {
  margin-right: 30px;
}

.details > input:first-child {
  margin-left: calc(25%   6px);
  padding: 3px 6px;
}

<form>
  <div class="details">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" />
  </div>
  <div class="details">
    <label for="tel">Telephone Number:</label>
    <input type="tel" id="tel" name="tel" />
  </div>
  <div class="details">
    <label for="position">Position:</label>
    <input type="text" id="position" name="position" />
    <input type="radio" name="availability" id="Part-Time" value="Part-Time" />
    <label for="radio">Part-Time</label>
    <input type="radio" name="availability" id="Full-Time" value="Full-Time" />
    <label for="radio">Full-Time</label>
  </div>
  <div class="details">
    <label for="date">Date:</label>
    <input type="date" id="date" name="date" />
    <input type="checkbox" name="AM" id="AM" value="AM" />
    <label for="checkbox">AM</label>
    <input type="checkbox" name="PM" id="PM" value="PM" />
    <label for="radio">PM</label>
  </div>
  <div class="details">
    <label for="yearsofexperience">Years of Experience:</label>
    <input type="text" id="yearsofexperience" name="yearsofexperience" />
  </div>
  <div class="details"></div>
  <div class="details">
    <label for="experience">Experience:</label>
    <textarea name="experience" id="experience" rows="1" cols="20">
Worked 5 years at Bayshore Veterinarian Services</textarea
    >
  </div>
  <div class="details">
    <input type="submit" value="Apply Now" />
  </div>
</form>

標籤：网页格式CSS形式展示

上一篇：如何在Laravel中使用Form::Select在輸入中僅顯示陣列中的特定資料？[復制]

下一篇：基本的HTML登錄表單