0

ここに画像の説明を入力

http://liveweave.com/73vub5

そのため、画像に表示されているようにオブジェクトを表示するようにしましたが、2 番目のオブジェクトを選択すると、最初のオブジェクトがオフになり、2 番目のオブジェクトが選択されます。フォームのすぐ内側にボックス化された通常の入力を使用すると、JavaScript を必要とせずに自動的に行われます。とにかく、これを修正するには、コーディングに多くの時間を費やすので、オブジェクトが選択/チェックされ、選択解除/チェック解除されるたびに Javascript/JQuery で定義する必要はありません。

<style type="text/css">
div#container div {
    display:inline-block;
    margin:1.25%;}

div#circle {
    width:40px;
    height:40px;
    border:1px dashed #000;
    border-radius:50%;}

div#square {
    width:40px;
    height:40px;
    border:1px dashed #000;}
</style>

<div id="container" align="center">
    <form>
        <div id="square"><br><br>
        <input type="radio" name="squareselec" checked="true"></div>

        <div id="circle"><br><br>
        <input type="radio" name="circleselec"></div>
    </form>
</div>
4

1 に答える 1

1

入力要素を中央に配置するには、ラジオを表示する必要があります: inline-block; - そしてそれはコンテナです text-align: center;

javaScript フックまたは非常に特別な理由で ID を使用しない限り、ID を使用しないことをお勧めします。HERE は、あなたが遊ぶためのコードを含む jsfiddleです。これが役立つことを願っています。-ヌーボー

HTML

<div class="object-wrapper">
    <img alt="image name" src="http://placehold.it/50x50" />
    <input type="radio" name="squareselec" />
</div>

<div class="object-wrapper">
    <img alt="image name"  class="circle" src="http://placehold.it/50x50" />
    <input type="radio" name="squareselec" />
</div>

CSS

.object-wrapper {
    width: 3em; /* arbitrary */

    text-align: center;

    /* to explain visually */
    border: 1px solid red;
    padding: .1em;

    /* to grid them */
    float: left;
    margin-right: .5em;
}

.object-wrapper img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.object-wrapper input[type="radio"] {
    display: inline-block;

}

.circle { /* to make a circle */
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
于 2013-06-01T19:45:40.817 に答える