0

2div。HTML と CSS のみ。

2 番目の div が最初の div の右側に配置されるように CSS で指定されています。

2 番目の div の見出しはそこにありますが、チェック ボックスではありません。

2 番目の div のチェック ボックスが同じ領域にないのはなぜですか?
(それらは、最初の div の下、左側にある....?)

どんな助けでも大歓迎です。

JsFiddle のコード: http://jsfiddle.net/GregMcNulty/2mQ7k/

<html>
    <head>
        <style type="text/css">
            #checkbox1
            {
                display:inline;
                position:relative;
                top:1in;
                left: .5in;                              
            }
            #checkbox2
            {
                display:inline;
                position:relative;
                top:1in;
                left: 1.5in;                
            }   
        </style>    
    </head>
<body>   

      <form>

        <div id="checkbox1">
            Please select the Clamps you are interested in:
        </div>

        <div id="checkbox2">
            Please select the Revets you are interested in: <br />
            <input type="checkbox" name="Solid" /> Solid <br />
            <input type="checkbox" name="Cherry" /> Cherry lock <br />
            <input type="checkbox" name="PopRivets" /> PopRivets <br />
            <input type="checkbox" name="Rivnuts" /> Rivnuts <br />
            <input type="checkbox" name="Huck" /> Huck Clinch
        </div>


    </form>

</body>
</html>
4

1 に答える 1

2

あなたはあなたinlineが実際に望んでいたのはあなたのdivを持っていると思いますinline-block。また、それらが望ましい配置になるようにそれらを垂直に配置します。

        #checkbox1
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: .5in;                              
        }
        #checkbox2
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: 1.5in;                
        }

フィドル

于 2012-05-26T07:04:17.963 に答える