I'm having a strange problem, I'm trying to apply an html template to a Wordpress website, and it has a form, and the fields from them are inside HTML ul li.
But when I apply css to li, the only first element will not be a float on the left. I tried to fix, but could not find a solution. can someone give me an idea to fix this. I add some codes below
<div class="bd">
<ul class="clearfix">
<li>
<label>電話</label><br>
<span class="wpcf7-form-control-wrap your-phone"><input type="text" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required text" size="40" value="" name="your-phone"></span>
</li>
<li>
<label>公司名字</label><br>
<span class="wpcf7-form-control-wrap your-company"><input type="text" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required text" size="40" value="" name="your-company"></span>
</li>
<li>
<label>姓名</label><br>
<span class="wpcf7-form-control-wrap your-fullname"><input type="text" aria-invalid="false" class="wpcf7-form-control wpcf7-text text" size="40" value="" name="your-fullname"></span>
</li>
<li>
<label>預算資金</label><br>
<span class="wpcf7-form-control-wrap your-buject"><input type="text" aria-invalid="false" class="wpcf7-form-control wpcf7-text text" size="40" value="" name="your-buject"></span>
</li>
<li>
<label>電郵</label><br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" aria-invalid="false" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email text" size="40" value="" name="your-email"></span>
</li>
<li>
<label>目標</label><br>
<span class="wpcf7-form-control-wrap your-aims"><input type="text" aria-invalid="false" class="wpcf7-form-control wpcf7-text text" size="40" value="" name="your-aims"></span>
</li>
</ul>
<div class="btn"><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Send"><img class="ajax-loader" src="http://5unit.com/test/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
</div>
<p></p></div>
CSS
.contact-box .box .bd {
padding: 28px 0;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.contact-box .box .bd ul li {
float: left;
padding-bottom: 2px;
padding-left: 43px;
width: 580px;
}
.contact-box .box .bd ul li label {
display: block;
font-size: 18px;
height: 55px;
line-height: 55px;
}
You can only see whether the first is centered, while others swim well on the left
Can someone please help me fix this strange error.
the form should look like http://awesomescreenshot.com/0b563venfe
Found a solution because the WordPress CSS source code had some css effect for it, but it doesn’t have a direct effect when I delete this css that it worked.
.entry-content h1,
.entry-summary h1,
.comment-content h1,
.textwidget h1 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
margin-top: 2em;
margin-bottom: 1em;
}