2016-05-02 21 views
0

我在三个不同类型的输入框中添加了联系表单7在wordpress新闻网站。以下是输入框的CSS。css楼梯案件的联系表格7

.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 stair case问题,无法解决它。

+1

你想要这些输入为每行一个吗? –

+0

编号分两栏。对于电话号码,会有三个连续的。请检查底部的更新网址。 –

+2

为什么在输入之间有额外的br标签?他们正在造成这个问题。 –

回答

0

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

enter image description here

+0

是的,它帮助。但是对于参考,我会提到word-press联系表单7会自动添加这些标签。要禁用它们,我添加了define('WPCF7_AUTOP',false);在wp-contact-form-7.php –

+0

由于你的主题是基于bootstrap的,你还可以考虑使用引导形式和它的内联输入类。 –