Список li первый элемент css float не работает

Question

У меня возникла странная проблема, я пытаюсь применить html-шаблон к веб-сайту wordpress, и у него есть форма, а поля из них есть внутри 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; 
} 

Вы можете увидеть только первые литий центра и другие и плавал оставил хорошо

Может кто-то пожалуйста, помогите мне исправить эту странную ошибку

вид должен быть 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) имеет большой край поля, а плавающий элемент нажимает на него.

В идеале, переопределите это поле и снимите его, чтобы плавающее поле работало правильно.

В качестве альтернативы вы можете добавить "clear: both;" к первому li в вашей ul.

Answer 2

Вы можете использовать псевдо класс : первый-в-типа