0

私の質問は簡単ですが、チェックボックスのリストを中央に配置する方法はありますか？ここに私が今持っているものがあります。

     html>
     <Head>
     <center>
     <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
     <H1>Select a program you want to run.</H1>
     <A href="file://C:\Windows/notepad.exe">Notepad</a>
     <div>
     <a href="file://D:\My Documents">Documents</a>
     <div>
     <a href="file://D:\Desktop\Student Applications">programs</a>
     <div>
     <a href="http://pilot.wright.edu">Pilot</a>
     <div>
     <form>
     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
     <div>
     <input type="checkbox">A3</input>
     <div>
     <input type="checkbox">CR</input>
     <div>
     <input type="checkbox">CPR</input>
     <div>
     <input type="checkbox">MM</input>
     <div>
     <input type="checkbox">IR</input>
     <div>
     <button type="submit" id="34">SUBMIT</button>
     </form>
     </center>
     </head>
     </html>

これを HTML として開くと、私が話していることがわかるはずです。前もって感謝します。

4

5 に答える 5

1

divプロパティを持つ内に各チェックボックスがあるdisplay:blockため、新しい行に表示されます。divマークアップを変更し、チェックボックスにラップされたそれぞれを削除するか、チェックボックスを含む要素に設定display:inline-blockまたは設定float:leftします。div

jsFiddle デモ- 最も簡単なオプション -divs各チェックボックスの周りを削除します。

私が誤解していて、それらを縦に並べたい場合は、この jsFiddle demo を参照してください。

それとは別に、修正が必要な重大な構文エラーがいくつかあります。

  • <center>まだ減価償却されていない場合は、まもなく減価償却されます..
  • htmlをタグに入れることはできませんhead。
  • ほとんどのタグを閉じていませんでした..
于 2013-10-08T19:19:06.930 に答える
1
  1. センタリングを使用している<center>... 最初に開始/終了の CENTER タグを削除します。
  2. すべての開始 DIV を終了 DIV で終了します。
  3. 各 DIV にスタイルを追加しますstyle="text-align:left;"
于 2013-10-08T19:19:35.987 に答える
1

あなたが求めるものを達成するための方法は文字通り何百もあります。あなたの学習レベルとあなたのアプローチを考えると、私はこれをお勧めします：

<html>
     <head>
        <style type="text/css">
            #checkboxOptions {
                width: 100px;
                margin: 0 0 0 50px;
                border:5px solid red;
                text-align: left;
            }
        </style>
     </head>
     <center>
         <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
             <h1>Select a program you want to run.</h1>
             <a href="file://C:\Windows/notepad.exe">Notepad</a>
             <br />
             <a href="file://D:\My Documents">Documents</a>
             <br />
             <a href="file://D:\Desktop\Student Applications">programs</a>
             <br />
             <a href="http://pilot.wright.edu">Pilot</a>
             <br />
             <form>
                 <div id='checkboxOptions'>
                     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
                     <br />
                     <input type="checkbox">A3</input>
                     <br />
                     <input type="checkbox">CR</input>
                     <br />
                     <input type="checkbox">CPR</input>
                     <br />
                     <input type="checkbox">MM</input>
                     <br />
                     <input type="checkbox">IR</input>
                 </div>
                 <button type="submit" id="34">SUBMIT</button>
             </form>
         </div>
     </center>
</html>

見つかった構文エラーを修正し、関連するスタイルをドキュメントの head セクションに入れました。また、問題の div の周りにかなり明白な境界線を追加して、それが何をしているかを確認できるようにしました。width 属性と margin プロパティをいじって、好きなように配置します。

于 2013-10-08T19:35:33.603 に答える