0

在此处输入图像描述

http://liveweave.com/73vub5

所以我让对象以我想要的方式显示在图像中，但我现在的问题是当我选择第二个对象时，第一个对象应该被取消选中并选择第二个对象。使用仅在表单内装箱的常规输入，它会自动完成，而无需 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;

我建议远离 id，除非将它们用于 javaScript 挂钩或非常特殊的原因。这里是一个带有代码的 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 回答