Html 列表li第一个元素css float不工作

我面临着一个奇怪的问题，我正在尝试将html模板应用到wordpress网站，它有一个表单，并且from字段包含在html ul li中

但是当我将css应用于li时，第一个元素就不会向左浮动。我试图修复，但没有找到任何解决方案。有人能给我一个解决这个问题的主意吗。我在下面添加了一些代码

 <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>

你只能看到第一个李居中，其他人和浮动左井

有人能帮我纠正这个奇怪的错误吗

表格应该是

找到了一个解决方案，这是因为WordPress的原始css对此有一些css效果，但当我删除这个css时，它并没有直接的效果

.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;
}

---

您可以使用伪类

---

：第一种类型

我查看了您的测试站点，发现了问题所在

原因是它前面的元素（.box.hd.h3）有一个大的底部空白，而浮动的元素正推着它

理想情况下，覆盖该边距底部将允许浮动正常工作

---

或者，您可以在ul中的第一个li中添加一个“clear:both；”。

您希望第一个li也向左浮动吗？这就是你的问题似乎要问的。是的，它应该是这样的，不起作用，我也尝试对第一个元素使用内联样式，但很多时候它不是向左浮动的，这种奇怪的行为，特别是浮动元素，是由于相邻元素或父元素的属性造成的

.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;
}