浮动右复选框，按钮和输入框

Question

我认为它必须相当简单，但我似乎无法弄清楚如何让我的花车正确。图片展示了我想要的东西和我拥有的东西。如果您提供答案，请提供逻辑。感谢。

        <div id="racks" style="overflow:auto">
        <div id="selStat">
        <p>No station selected</p>
        </div>
        <hr id="hrtest">
        <div id="rackAction">
        <p>Choose the type of card, then select which action to perform.</p>
        <div id="radio">
        Type:
        <div class="fr">
        <input type="radio" id="radioS" name="radio"><label for="radioS">S</label>
        <input type="radio" id="radioP" name="radio"><label for="radioP">P</label>
        <input type="radio" id="radioV" name="radio"><label for="radioV">V</label>
        </div></div>
        <p>Cardnumber:  <input id="cardNum" class="fr" type="number" size="1"/> </p>
        <p>Action: 
        <div class="fr">
        <button onClick="addRack()" type="button">Add</button>
        <button onClick="deleteRack()" type="button">Delete</button>
        </div></p>
        </div>
        </div>

CSS如下：

 .fr{
    float:right;
    }

Answer 1

从语法上讲，div标记内不能包含p。关于该主题，请查看此SO Question。要将元素放在同一行，您可以将“Action”文本放在单独的div中，然后向左浮动。

HTML：

    <div id="racks" style="overflow:auto">
      <div id="selStat">
        <p>No station selected</p>
      </div>

      <hr id="hrtest">

      <div id="rackAction">
        <p>Choose the type of card, then select which action to perform.</p>
        <div id="radio">
          Type:
          <div class="fr">
            <input type="radio" class="margin-bottom" id="radioS" name="radio"><label for="radioS">S</label>
            <input type="radio" class="margin-bottom" id="radioP" name="radio"><label for="radioP">P</label>
            <input type="radio" class="margin-bottom" id="radioV" name="radio"><label for="radioV">V</label>
          </div>
        </div>

        <p>Cardnumber:  <input id="cardNum" class="fr" type="number" size="1"/> </p>

        <div class="fl">Action:</div> 

        <div class="fr">
          <button onClick="addRack()" type="button">Add</button>
          <button onClick="deleteRack()" type="button">Delete</button>
        </div>
      </div>
    </div>

CSS：

.fr{
  float:right;
}
.fl {
  float:left;
}
.margin-bottom {
    margin-bottom:10px;
}

fiddle。

修改

根据评论，您可以在相关的单选按钮中添加一个类，并在单选按钮的底部添加其他边距或填充。我已经更新了代码以包含类添加和CSS。