Question

如果窗口调整得更小，如何防止标签和输入框中断？有时我的输入框将移动到下一行，而标签仍然在上面。如果必须将输入框向下移动到下一行，我希望它们保持在一起。

以下是输入框和标签的代码块：

＆＃13;

form {
  width: 100px;          /* For Demo purposes */
  border: 1px solid red; /* For Demo purposes */
}

＆＃13;

<div class="rightCol">
    <h1>Slope Intercept Form</h1>
    <form>
        <label for="x1">X1: </label>
        <input id="x1" type="text" name="x1" maxlength="2" size="6">
        <label for="y1">Y1: </label>
        <input type="text" name="y1" maxlength="2" size="6"><br>
        <label for="x2">X2: </label>
        <input type="text" name="x2" maxlength="2" size="6">
        <label for="y2">Y2: </label>
        <input type="text" name="y2" maxlength="2" size="6"><br>
    </form>
</div>

＆＃13;

<br>代码仍然应该破坏该行，否则该行不应该破坏。

Answer 1

要获得您正在寻找的效果，请使用white-space: nowrap。

＆＃13;

form {
  white-space: nowrap;
  width: 100px;          /* For Demo purposes */
  border: 1px solid red; /* For Demo purposes */
}

＆＃13;

<div class="rightCol">
    <h1>Slope Intercept Form</h1>
    <form>
        <label for="x1">X1: </label>
        <input id="x1" type="text" name="x1" maxlength="2" size="6">
        <label for="y1">Y1: </label>
        <input type="text" name="y1" maxlength="2" size="6">
        <script>document.getElementById("y1").onblur=message;</script><br>
        <label for="x2">X2: </label>
        <input type="text" name="x2" maxlength="2" size="6">
        <label for="y2">Y2: </label>
        <input type="text" name="y2" maxlength="2" size="6"><br>
    </form>
</div>

＆＃13;

在调整窗口大小时，防止输入标签和输入框在单独的行上显示

1 个答案: