0

How do I keep a label and input box from breaking if the window is resized smaller? Sometimes my input box will be moved to the next row while the label remains above. I want them to stay together if the input box has to be moved down to the next row.

Here is the block of code for the input boxes and the labels:

form {
  width: 100px;          /* For Demo purposes */
  border: 1px solid red; /* For Demo purposes */
}
<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>

The <br> tags should still break the line, but otherwise the line should not break.

RandyL
  • 17
  • 7
  • 2
    possible duplicate of [Forcing label to flow inline with input that they label](http://stackoverflow.com/questions/4209154/forcing-label-to-flow-inline-with-input-that-they-label) – Mousey Aug 21 '15 at 00:01

1 Answers1

0

To achieve the effect you're looking for, use white-space: nowrap.

form {
  white-space: nowrap;
  width: 100px;          /* For Demo purposes */
  border: 1px solid red; /* For Demo purposes */
}
<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>