4 Contact Form 7中的Column，第2行out of positions

Question

这是联系表 7 中的 CSS 和 html，我是 css 的新手，我需要做什么才能使第二行没有出现问题请问？

'Contact Number' 应该是第 2 行的第一个项目，不知道它是怎么出现在那里的。

Outcome

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth { width: 22%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third, .one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

<div class="one-fourth">
[select* ppl "1 Person" "2 Persons" "3 Persons" "4 Persons" "5 Persons" "6 Persons" "7 Persons" "8 Persons" "9 Persons" "10 Persons" "11 Persons" "12 Persons" "13 Persons" "14 Persons" "15 Persons" "16 Persons" "17 Persons" "18 Persons" "19 Persons" "20 Persons" "21 Persons" "22 Persons" "23 Persons" "24 Persons" "25 Persons" "26 Persons" "27 Persons" "28 Persons" "29 Persons" "30 Persons" "31 Persons" "32 Persons" "33 Persons" "34 Persons" "35 Persons" "36 Persons" "37 Persons" "38 Persons" "39 Persons" "40 Persons"]
</div>
 
<div class="one-fourth">
[date* r-date date-format:mm/dd/yy min:today+2days]
</div>

<div class="one-fourth">
[select* r-time "8:00pm" "8:30pm" "9:00pm" "9:30pm" "10:00pm" "10:30pm" "11:00pm" "11:30pm" "12:00am" "12:30am" "01:00am"]
</div>

<div class="one-fourth last">
[text* r-name placeholder "Contact Person's Name"]
</div>
 
<div class="one-fourth">
[tel* r-mob placeholder "Contact Number"]
</div>

<div class="one-fourth">
[email* r-email placeholder "Email Address"]
</div>

<div class="one-fourth">
[select* r-method "Preferred Contact Method" "Phone" "Email"]
</div>

<div class="one-fourth last">
[submit "Book a room"]</div>

enter code here

Answer 1

您可以只使用 flexbox 作为包装器，这将使行高度均匀，而不是使用浮动。

.flex-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.one-half, .one-third, .one-fourth {
    margin-bottom: 20px;
}
.one-half {
    width: 48%;
}
.one-third {
    width: 30.66%;
}
.one-fourth {
    width: 22%;
}

<div class="flex-wrapper">
  <div class="one-fourth"> [select* ppl "1 Person" "2 Persons" "3 Persons" "4 Persons" "5 Persons" "6 Persons" "7 Persons" "8 Persons" "9 Persons" "10 Persons" "11 Persons" "12 Persons" "13 Persons" "14 Persons" "15 Persons" "16 Persons" "17 Persons" "18 Persons" "19 Persons" "20 Persons" "21 Persons" "22 Persons" "23 Persons" "24 Persons" "25 Persons" "26 Persons" "27 Persons" "28 Persons" "29 Persons" "30 Persons" "31 Persons" "32 Persons" "33 Persons" "34 Persons" "35 Persons" "36 Persons" "37 Persons" "38 Persons" "39 Persons" "40 Persons"] </div>
  <div class="one-fourth"> [date* r-date date-format:mm/dd/yy min:today+2days] </div>
  <div class="one-fourth"> [select* r-time "8:00pm" "8:30pm" "9:00pm" "9:30pm" "10:00pm" "10:30pm" "11:00pm" "11:30pm" "12:00am" "12:30am" "01:00am"] </div>
  <div class="one-fourth"> [text* r-name placeholder "Contact Person's Name"] </div>
  <div class="one-fourth"> [tel* r-mob placeholder "Contact Number"] </div>
  <div class="one-fourth"> [email* r-email placeholder "Email Address"] </div>
  <div class="one-fourth"> [select* r-method "Preferred Contact Method" "Phone" "Email"] </div>
  <div class="one-fourth"> [submit "Book a room"]</div>
</div>

4 Contact Form 7中的Column，第2行out of positions

4 Column in Contact Form 7, the 2nd row out of positions

html

css

wordpress

multiple-columns

contact-form-7