在输入标签上使用 float:right 时如何摆脱多余的空间

Question

[在此处输入图片描述][1] 打开图片
如何消除带圆圈的间隙？
我试过这个并添加 clear:right;对于 .right 类，但它无济于事
我想要“员工？”下方的输入框。在右侧
CSS

h1, h2, h3, h4, h5, h6{
            display:inline
        }

        .Aline{
          width: 500px;
          margin-left: 25px;
        }

        .Aline input {
          width: 100%;

          style="padding-right:20px; 
          text-align:right;" 
          value="50"
        }

        .Aline span {
            style="margin-left:-20px;"
        }

        html {
            font-family: "Courier New";
        }

        .space input {
            margin-left: 25px;
        }

        .right {
            float:right;
            clear:right;
        }

HTML

<h1>Ikea Desks</h1><p class="right">Staff Member?</p>
        <br>
        <h2>Buy your desks here for a cheap price or call <h2 id="PhoneNumber"></h2><h2> for cheaper prices </h2>
        <div class="right">
            <label> ID: </label>
            <input type="number" id="ID">
        </div>
        <br>
        <br>
        <h3>Pick the wood: </h3>
        <br>
        <div class="Space">
            <input type="radio" name="wood" id="O" onclick="Calculate()"> Oak <br>
            <input type="radio" name="wood" id="H" onclick="Calculate()"> Hickory <br>
            <input type="radio" name="wood" id="M" onclick="Calculate()"> Mahogamy <br>
        </div>
        <br>
        <h3>State Sizes: </h3>

        <div class="Aline">
            <label> Height (Up-Down): </label>
            <input type="number" id="Height" value=0 size="4"><span>cm</span>
            <br>

            <label>Length (West-East): </label>
            <input type="number" id="Length" value=0><span>cm</span>
            <br>

            <label>Width (North-South): </label>
            <input type="number" id="Width" value=0><span>cm</span>
            <br>

            <h4>Min: 100cm Max: 200cm-Height (Make it normal)</h4>
        </div>


  [1]: https://i.stack.imgur.com/yqBk4.png

Answer 1

如果您只是将它移到与 ID 输入相同的容器中，并删除 right 类，似乎没问题 - 我已在 CSS 中添加了一个临时选择器以将其与右侧对齐，但您可以这样做任何你想要的内联样式/类

h1,
h2,
h3,
h4,
h5,
h6 {
  display: inline
}

.Aline {
  width: 500px;
  margin-left: 25px;
}

.Aline input {
  width: 100%;
  style="padding-right:20px; 
 text-align: right;
  " 
 value="50"
}

.Aline span {
  style="margin-left:-20px;"
}

html {
  font-family: "Courier New";
}

.space input {
  margin-left: 25px;
}

.right {
  float: right;
  clear: right;
}

.right > p {
  /* Mostly for demo, should be a nicer class */
  text-align: right;
}

<h1>Ikea Desks</h1>
<br>
<h2>Buy your desks here for a cheap price or call
  <h2 id="PhoneNumber"></h2>
  <h2> for cheaper prices </h2>
  <div class="right">
    <p>Staff Member?</p>
    <label> ID: </label>
    <input type="number" id="ID">
  </div>
  <br>
  <br>
  <h3>Pick the wood: </h3>
  <br>
  <div class="Space">
    <input type="radio" name="wood" id="O" onclick="Calculate()"> Oak <br>
    <input type="radio" name="wood" id="H" onclick="Calculate()"> Hickory <br>
    <input type="radio" name="wood" id="M" onclick="Calculate()"> Mahogamy <br>
  </div>
  <br>
  <h3>State Sizes: </h3>

  <div class="Aline">
    <label> Height (Up-Down): </label>
    <input type="number" id="Height" value=0 size="4"><span>cm</span>
    <br>

    <label>Length (West-East): </label>
    <input type="number" id="Length" value=0><span>cm</span>
    <br>

    <label>Width (North-South): </label>
    <input type="number" id="Width" value=0><span>cm</span>
    <br>

    <h4>Min: 100cm Max: 200cm-Height (Make it normal)</h4>
  </div>