Question

在发布this后，我试图暗示风格 -

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

但视图中没有任何变化（here the Demo）。

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

如何使用nth-child选择器将结果here作为结果来实现？

Answer 1

您的form的明确宽度为171px，因此这些div没有足够的空间放置在同一条线上。只需删除显式宽度，即默认为100%（您可能希望even个子项为左浮动而不是odd个。）

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

Answer 2

我会更改你的代码，但是，你可以将每个<div class="mktoFormRow">显示为内联块并将所有内容浮动到左边......你将获得这些div的水平线。然后你可以使用nth-child(2nd)清除每两个div，你会得到每行2个div ...我希望这有帮助。

如何更改此表单中的视图？

2 个答案: