在输入标签上使用 float:right 时如何去掉多余的 space

Question

[在此处输入图片描述][1] 打开图片
如何去除圆圈间隙？
我试过这个并添加 clear:right;对于 .right class 但它没有帮助
我想要右侧 "Staff member?" 正下方的输入框
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 class 似乎没问题 - 我已经将一个临时选择器添加到 CSS 到将其右对齐，但您可以将其作为内联样式/ class 任何您想要的

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>

在输入标签上使用 float:right 时如何去掉多余的 space

How to get rid of extra space when using float:right on input tag

html

css

input

css-float