html - 列出 li 第一个元素 css float 不工作

Question

我遇到了一个奇怪的问题，我正在尝试将 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>

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

你只能看到第一个 li 居中，其他的都很好地向左浮动

谁能帮我解决这个奇怪的错误

表格应该像http://awesomescreenshot.com/0b563venfe

找到了一个解决方案，它发生了，因为 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;
}

Answer 1

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

原因是它前面的元素 (.box .hd.h3) 有一个很大的 margin-bottom，而 float 元素正在插入它。

理想情况下，重写那个 margin-bottom 它将允许 float 正常工作。

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