Question

我有一张桌子，当浏览器窗口缩小时，该表格在错误的列下折叠，使其在阅读时感到困惑。即来自：

至：

如何获取最后一个要包装在正确列下的文本框？我尝试将边框折叠CSS设置为“分离”，但没有区别。我的html看起来像这样：

<style>
.inline {
    display: inline-block;
}
</style>

  <table>
      @for (int i = 0; i < 3; i++)
        {                                   
          <tr>
             <td>
                <label>Tries</label>
                 <label class="ui-checkbox">
                  @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
            </td>
           <td>
              <label class="inline">Max points</label>
                  <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-20", max = "", min = "0", type = "number", value = ""})
                    </div>
                  </td>
          <td>
             <label>Has bonus points</label>
             <label class="ui-checkbox">
             @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
         </td>
          <td>
             <div class="inline ">
                 @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>
               <label class="inline">bonus points for more than or equal to</label>
               <div class="inline ">
                   @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>

            </td>
         </tr>
     }
   </table>

Answer 1

<td>
         <div class="inline ">
             @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>
           <label class="inline">bonus points for more than or equal to</label>
           <div class="inline ">
               @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>

        </td>

将最后一个td更改为

  <td>
                 <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
                   <label class="inline">bonus points for more than or equal to</label>

                </td>
<td>
<div class="inline ">
                       @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
</td>

Answer 2

这是一个使用CSS网格的小例子。您可以自定义访问空间的使用方式。

这是一个入门的好链接：https://css-tricks.com/snippets/css/complete-guide-grid/

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

<div class="grid">
  <!-- Start first element -->
  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
  <!-- End first element -->

  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
</div>

Answer 3

首先，您需要为要应用CSS的窗口大小设置断点。例如。

@media屏幕和（最大宽度：767像素）{

    // apply css when screen width is under 767px

}

然后，您可以更改.inline以显示为块，不确定是否会影响复选框以丢失某些设计。为了更改您的复选框设计，您可以将复选框包装在div内并内联应用类。

表td元素在错误的列下环绕

3 个答案: