Question

我试图将四个单选按钮水平对齐到下拉选择字段的右侧。下拉字段是主要输入，单选按钮为用户提供了四个单独的选项，可以选择从下拉列表中选择的字段。

我遇到的问题是让单选按钮水平排列在下拉选择字段的右侧。我一直在调整html并使用一些css属性，但我还没有让无线电在水平方向排列到选择区域的右侧。

我希望只使用html和css执行此操作，但如果使用这些工具太难，则会使用javascript。

这就是我现在所拥有的......

＆＃13;

.pcode select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    width: 80px;
}

input[type="radio"] {
    margin-left:10px;
}

＆＃13;

<p>P-Codes (select all that apply)</p>

    <div class="pcode">
            <select id="pcode1">
            <option value=""></option>
            <option value="51xx">51XX</option>
            <option value="52xx">52XX</option>
            <option value="53xx">53XX</option>
            <option value="55xx">55XX</option>
            <option value="56xx">55XX</option>
            <option value="57xx">57XX</option>
            <option value="58xx">58XX</option>
            <option value="6203">6203</option>
        </select>
    </div> 

    <input type="radio" name="ptype1" value="d">D
    <input type="radio" name="ptype1" value="p">P
    <input type="radio" name="ptype1" value="q">Q
    <input type="radio" name="ptype1" value="s">S

＆＃13;

Answer 1

解决了......

  .pcode select {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  width: 80px;
}

input[type="radio"] {
  float left;
  display: inline-block;

<div class="pcode">
  <select id="pcode1">
            <option value=""></option>
            <option value="51xx">51XX</option>
            <option value="52xx">52XX</option>
            <option value="53xx">53XX</option>
            <option value="55xx">55XX</option>
            <option value="56xx">56XX</option>
            <option value="57xx">57XX</option>
            <option value="58xx">58XX</option>
            <option value="6203">6203</option>
  </select>
  <input type="radio" name="ptype1" value="d">D
  <input type="radio" name="ptype1" value="p">P
  <input type="radio" name="ptype1" value="q">Q
  <input type="radio" name="ptype1" value="s">S
</div>

<div class="pcode">
  <select id="pcode2">
            <option value=""></option>
            <option value="51xx">51XX</option>
            <option value="52xx">52XX</option>
            <option value="53xx">53XX</option>
            <option value="55xx">55XX</option>
            <option value="56xx">56XX</option>
            <option value="57xx">57XX</option>
            <option value="58xx">58XX</option>
            <option value="6203">6203</option>
  </select>
  <input type="radio" name="ptype2" value="d">D
  <input type="radio" name="ptype2" value="p">P
  <input type="radio" name="ptype2" value="q">Q
  <input type="radio" name="ptype2" value="s">S
</div>

尝试水平对齐单选按钮和输入字段

1 个答案: