Question

在我的MVC网站中，我有以下几行代码：

<h2>@Model.Question</h2>
    @using (Html.BeginForm("Index", "Result", FormMethod.Post))
    {
        <table cellspacing="10">
            <tr>
                @foreach (string answer in Model.Answers)
                {
                    <td><input type="radio" name="answer" value="@answer" /><span>@answer</span></td>
                }
            </tr>
        </table>
        <div id="footer">
            <input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
            <input class="btn btn-success" type="submit" />
        </div>
    }

（忽略页脚中当前设置不佳的第一个按钮）

<input type="radio...返回与数据库中的答案相同数量的单选按钮。我的问题是，对于一个问题，有很多答案，它开始使页面向侧面滚动，如下图

所示

我想要发生的是单选按钮从一条新线开始，可能在另一条<td>开始，当它开始走得太远时。当它碰到我可以创造的周围div的边界时可能会完成？或者当它超过某个像素宽度？我不太清楚如何处理这个问题。提前致谢！

Answer 1

最好使用具有固定宽度（或宽度百分比）的DIV，然后将它们向左浮动，以便它们在一行中粘在一起，而不是使用表来完成工作。当一行有太多元素时，它们会自动跳转到一个新行。如果您要更改浏览器的宽度，这也可以使用。

CSS部分：

.elements {
  border: 1px solid red;
}

.elements:before,
.elements:after{
  display: table;
  content: " ";
}

.elements:after {
  clear: both;
}

.element {
  float: left;
  min-height: 1px;
  border: 1px solid blue;
  margin: 2px;
}

HTML部分：

<div class="elements">
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
</div>

https://jsfiddle.net/4xvdcw9b/2/

Answer 2

如果没有必要使用表格，您可以尝试这种方法：

<ul>
                    @foreach (string answer in Model.Answers)
                    {
                        <li><input type="radio" name="answer" value="@answer" /><span>@answer</span></li>
                    }
            </ul>

有这样的风格：

ul
{
   max-width:300px;
list-style-type: none;
}

li
{
   display: inline; 
}

如果超过一定宽度，请创建一个新的？

2 个答案: