css 联系表 7 中的楼梯案例

Question

我在word-press网站中添加了contact form 7，其中包含三种不同类型的输入框。以下是CSS个输入框

.inputbox {
    width: 46%;
    height: 30px;
    background: #ffe681;
    font-size: 13px;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    padding: 6px;
    border: 1px solid #ff9933;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}

.inputbox-one {
    width: 14%;
    height: 30px;
    background: #ffe681;
    font-size: 13px;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    padding: 6px;
    border: 1px solid #ff9933;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}

.inputbox-two {
    width: 30%;
    height: 30px;
    background: #ffe681;
    font-size: 13px;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    padding: 6px;
    border: 1px solid #ff9933;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}

我遇到 CSS 楼梯问题，无法解决。

Answer 1

想通了！只需删除联系表单中输入字段后的 <br> 标签。这些标签介绍了这种楼梯布局。这是结果。

css 联系表 7 中的楼梯案例

css stair case in contact form 7

css

contact-form-7