0

わかりました、これを少し言い換えさせてください。現在、縦に表示されているチェックボックスがあります。横に表示する必要があります。フォームは section タグで囲まれています。colorSwatches の id タグを バリエーションは機能しませんでした。問題のページを見るための URL はこちらhttp://www.inertiastreak.com/serial_quilters/order.php

次のコードブロックがあります。

<ul id="colorSwatches">
          <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['color[]'] == 'color[]') ? 'checked="checked"' : ''; ?>
              <li><input type="checkbox" name="color[]" value="red" />Red</li>
              <li><input type="checkbox" name="color[]" value="orange" />Orange</li>
              <li><input type="checkbox" name="color[]" value="yellow" />Yellow</li>
              <li><input type="checkbox" name="color[]" value="green" />Green</li>
              <li><input type="checkbox" name="color[]" value="blue" />Blue</li> 
              <li><input type="checkbox" name="color[]" value="purple" />Purple</li> 
              <li><input type="checkbox" name="color[]" value="pink" />Pink</li>
              <li><input type="checkbox" name="color[]" value="brown" />Brown</li> 
              <li><input type="checkbox" name="color[]" value="black" />Black</li>                   
              <li><input type="checkbox" name="color[]" value="white" />White</li>                   
          </ul>

現在、チェックボックスのリストは縦一列に表示されています。チェックボックスと色を横一列に表示したいと思います。私が入れたCSSのどのバリエーションもまったく機能していません。colorSwatches の ID を section#colorSwatches ul li {display:inline-block;} に設定しようとしましたが、うまくいきませんでした。それが機能する唯一の方法は、色のリストの上にあるフォームを閉じてから、セクション タグを閉じることでした。新しい section タグと新しい form タグを開き、本質的に不要な 2 番目のフォームを作成しました。

誰かが上記のような入力フィールドのスタックを取得してインラインブロック方式で表示する方法をアドバイスしていただければ、それは素晴らしいことです。UL と LI は削除できますが、私には関係ありません。

ところで、PHP は変更しないでください。

4

4 に答える 4

1

このCSSを試してください：

#colorSwatches li{
    display: inline;
}
#colorSwatches{
    white-space: nowrap;
}
于 2013-08-06T05:03:02.350 に答える
1

class="li_color" として li にクラスを指定します。

<ul id="colorSwatches">
              <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['color[]'] == 'color[]') ? 'checked="checked"' : ''; ?>
              <li class="li_color"><input type="checkbox" name="color[]" value="red" />Red</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="orange" />Orange</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="yellow" />Yellow</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="green" />Green</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="blue" />Blue</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="purple" />Purple</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="pink" />Pink</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="brown" />Brown</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="black" />Black</li>                   
              <li class="li_color"><input type="checkbox" name="color[]" value="white" />White</li>                   
          </ul>

スタイルをli_colorに次のように与えます

#colorSwatches {width:100%;}
#colorSwatches .li_color { float:left; width:100px; }

幅が足りない場合は、増やすことができます。

于 2013-08-06T04:42:13.163 に答える
1

リストの場合は、ul li幅を 100% にします

#colorSwatches{width:100%;float:left;}
#colorSwatches li{float:left;}

このデモを参照してください

于 2013-08-06T04:44:01.023 に答える