html - 带图像格式的单选按钮

Question

我试图在每行中包含三个图像，每个图像下方都有一个单选按钮。我对表单不太熟悉，我只是无法弄清楚为什么图像会以这种方式呈现。有人对如何创建这个有任何想法或想法吗？

/jess/design.html

编辑：想通了它的一部分......表格宽度的问题。如果有人对此无能为力，仍在尝试弄清楚如何在下面获取单选按钮。

Answer 1

只需将每个单选按钮及其图像放在一个带有 的 div 中width: 100%，它就可以了。

编辑：不用等待，这会将收音机放在图像的右侧，尝试在包装 div 内向图像添加 100% 宽度，并将包装 div 的宽度设置为所需列数所需的值（2 列 50%）

Answer 2

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

在这里看到它：http: //jsfiddle.net/SREMB/4/

html, body {
    width: 100%;
}

.row {
  text-align: center;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
}

.cell {
  padding: 10px;
  display: inline-block;
  text-align: center;
}

img {
  border: 2px solid black;
}
​

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>

​</p>

Answer 3

你可以这个，http://jsfiddle.net/ayBeh/

我建议你ID应该在同一页面按时使用，所以请使用.bead而不是“#bead”，对不起BRO，我看到你的代码，不太干净，有很多清理问题，我想你不熟悉也可以使用 HTML，但无论如何你已经尽力了，请继续保持，如果需要帮助，请随时联系我，