Html 带有图像格式的单选按钮

我试着在每一行有三个图像，每个图像下面都有一个单选按钮。我对表单不太熟悉，我就是不明白为什么图像会以这种方式呈现。有人对如何创造这个有什么想法或想法吗

/jess/design.html

---

编辑：找出其中的一部分。。。窗体上的宽度有问题。如果有人帮不上忙，仍在试图找出如何将单选按钮放在下面。

只要将每个单选按钮及其图像放在一个宽度为100%的div中，就可以了

---

编辑：不等待，这将使收音机位于图像的右侧，同时尝试将100%宽度添加到环绕div内的图像，并将环绕div的宽度设置为所需列数的值（2列为50%）

嵌套div并应用适当的规则：

请看这里：

HTML

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>


<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>

​

你可以选择这个

我建议您在同一页面上准时使用ID，所以请使用.bead代替“#bead”， 很抱歉，兄弟，我看到了你的代码，不太干净，有很多清理问题， 我想你也不熟悉HTML，但无论如何你都尽力了，继续保持下去，如果需要帮助，随时联系我

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>


<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>