html - 如何改变这种形式的看法？

Question

正在关注 this post ，我尝试暗示风格 -

.mktoFormRow:nth-child(odd) {
    float: left;
}

在下面的表格上 -

 <form id="mktoForm_17" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: inherit; font-size: 13px; color: rgb(51, 51, 51); width: 171px;" __biza="WJ__">
         <input type="hidden" id="country" name="country" value="Israel"><input type="hidden" id="00Nw0000003PHyq" name="00Nw0000003PHyq" value=""><input type="hidden" id="00Nw0000003PHyx" name="00Nw0000003PHyx" value=""><input type="hidden" id="00Nw0000003PHyz" name="00Nw0000003PHyz" value=""><input type="hidden" id="00Nw0000003PHyy" name="00Nw0000003PHyy" value=""><input type="hidden" id="00Nw0000003PHyl" name="00Nw0000003PHyl" value=""><input type="hidden" id="00Nw0000003PHyr" name="00Nw0000003PHyr" value=""><input type="hidden" id="00Nw0000003PHyn" name="00Nw0000003PHyn" value=""><input type="hidden" id="00Nw0000003PHyo" name="00Nw0000003PHyo" value=""><input type="hidden" id="00Nw0000003PHyv" name="00Nw0000003PHyv" value=""><input type="hidden" id="00Nw0000003PHyp" name="00Nw0000003PHyp" value=""><input type="hidden" id="00Nw0000003PHyu" name="00Nw0000003PHyu" value=""><input type="hidden" id="00Nw0000003PHys" name="00Nw0000003PHys" value=""><input type="hidden" id="00Nw0000003PHym" name="00Nw0000003PHym" value=""><input type="hidden" id="00Nw0000003PHyw" name="00Nw0000003PHyw" value=""><input type="hidden" id="00Nw0000003PHyt" name="00Nw0000003PHyt" value="http://localhost/codefuel/">
         <style type="text/css"></style>
         <div class="mktoFormRow">
            <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
               <div class="mktoOffset" style="width: 5px;"></div>
               <div class="mktoFieldWrap mktoRequiredField">
                  <label for="FirstName" class="mktoLabel mktoHasWidth" style="width: 10px;">
                     <div class="mktoAsterix">*</div>
                  </label>
                  <div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
                  <input id="FirstName" name="FirstName" placeholder="Name" maxlength="255" title="" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid" style="width: 150px;">
                  <div class="mktoClear"></div>
               </div>
               <div class="mktoClear"></div>
            </div>
            <div class="mktoClear"></div>
         </div>
         <div class="mktoFormRow">
            <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
               <div class="mktoOffset" style="width: 5px;"></div>
               <div class="mktoFieldWrap mktoRequiredField">
                  <label for="PersonEmail" class="mktoLabel mktoHasWidth" style="width: 10px;">
                     <div class="mktoAsterix">*</div>
                  </label>
                  <div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
                  <input id="PersonEmail" name="PersonEmail" placeholder="Email" maxlength="80" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired" style="width: 150px;">
                  <div class="mktoClear"></div>
               </div>
               <div class="mktoClear"></div>
            </div>
            <div class="mktoClear"></div>
         </div>
         <div class="mktoFormRow">
            <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
               <div class="mktoOffset" style="width: 5px;"></div>
               <div class="mktoFieldWrap mktoRequiredField">
                  <label for="Application_Download_Link__c" class="mktoLabel mktoHasWidth" style="width: 10px;">
                     <div class="mktoAsterix">*</div>
                  </label>
                  <div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
                  <input id="Application_Download_Link__c" name="Application_Download_Link__c" placeholder="Software URL" maxlength="255" type="url" class="mktoField mktoUrlField mktoHasWidth mktoRequired" style="width: 150px;">
                  <div class="mktoClear"></div>
               </div>
               <div class="mktoClear"></div>
            </div>
            <div class="mktoClear"></div>
         </div>
         <div class="mktoFormRow">
            <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
               <div class="mktoOffset" style="width: 5px;"></div>
               <div class="mktoFieldWrap mktoRequiredField">
                  <label for="Daily_Installs__c" class="mktoLabel mktoHasWidth" style="width: 10px;">
                     <div class="mktoAsterix">*</div>
                  </label>
                  <div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
                  <select id="Daily_Installs__c" name="Daily_Installs__c" class="mktoField mktoHasWidth mktoRequired" style="width: 150px;">
                     <option value="">Select...</option>
                     <option value="0-100">0-100</option>
                     <option value="100-500">100-500</option>
                     <option value="500-1,000">500-1,000</option>
                     <option value="More than 1,000">More than 1,000</option>
                     <option value="Not Applicable">Not Applicable</option>
                  </select>
                  <div class="mktoClear"></div>
               </div>
               <div class="mktoClear"></div>
            </div>
            <div class="mktoClear"></div>
         </div>
         <div class="mktoButtonRow"><span class="mktoButtonWrap mktoNative" style="margin-left: 110px;"><button type="submit" class="mktoButton">Submit</button></span></div>
         <input type="hidden" name="formid" class="mktoField mktoFieldDescriptor" value="17"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="955-BUF-612">
      </form>

但 View ( here the Demo ) 没有任何变化。

有 4 <div class="mktoFormRow">那里。

我怎样才能实现 View 作为结果 here使用 nth-child选择器？

Answer 1

您的 form 的宽度明确为 171px，因此这些 div 没有足够的空间放置在同一行上。只需删除显式宽度，这样它将默认为 100%(并且您可能希望 even 子项左浮动而不是 odd 子项).

解决方案:http://jsfiddle.net/c4YL4/18/