Question

我在桥梁主题中使用联系表格7。

我尝试自定义表单，以便有2列，文本与用户编写代码的框位于同一行。

我的问题在于，即使我使用样式来改变高度和宽度并设置边框也不采取风格。知道为什么会这样吗？

#left_form7 {
    width: 47%;
    float: left;
    margin-right:6%;
}

#right_form7 {
    width: 47%;
    float: left;
}

.clearfix_form7:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}

.clearfix_form7 {
    display:block;
}

span.label_form7 {
  float: left;
  width: 180px;
}

span.form-input_form7 {
  float: left;
  width: 200px;
}

<div class="clearfix_form7">
    <div id="left_form7">
    <span class="label_form7">First name</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text first-name]</span><br/> <br/>
    <span class="label_form7">Last name</span><span class="form-input_form7" style= "border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text last-name]</span><br/> <br/>
    <span class="label_form7">How Did You Find Us?</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text text-find-us]</span><br/>
    </div>
    <div id="right">
    <span class="label_form7">Email</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[email* your-email]</span><br/> <br/>
    <span class="label_form7">Phone</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text your-phone]</span>
    </div>
</div></div>

Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]

Here现在输出的一个例子，据我所知，它似乎没有改变。

Answer 1

试试这个，你不需要在每个输入元素上重复相同的样式。您有form-input_form7班选择它们，如果您将height: 5px设置为内联样式，则无法使用外部CSS覆盖它。

＆＃13;

#left_form7 {
    width: 47%;
    float: left;
    margin-right:6%;
}

#right_form7 {
    width: 47%;
    float: left;
}

.clearfix_form7:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}

.clearfix_form7 {
    display:block;
}

span.label_form7{
  float: left;
  width: 180px;
}

span.form-input_form7{
  float: left;
  width: 200px;
  border-width:2px;
  border-style: solid; 
  border-color: #000000;
}

＆＃13;

<div class="clearfix_form7">
    <div id="left_form7">
    <span class="label_form7">First name</span><span class="form-input_form7">[text first-name]</span><br/> <br/>
    <span class="label_form7">Last name</span><span class="form-input_form7">[text last-name]</span><br/> <br/>
    <span class="label_form7">How Did You Find Us?</span><span class="form-input_form7">[text text-find-us]</span><br/>
    </div>
    <div id="right_form7">
    <span class="label_form7">Email</span><span class="form-input_form7">[email* your-email]</span><br/> <br/>
    <span class="label_form7">Phone</span><span class="form-input_form7">[text your-phone]</span>
    </div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]

＆＃13;

风格不会改变形式

1 个答案: