如何并排放置 2 个单选列

Question

我在并排放置单选按钮时遇到问题。他们不会并肩而行。当它们并排移动时，它会弄乱我在这段代码下方的复选框。

我试过以不同的方式浮动它，使用填充和边距，我试过调整高度和宽度

<div class="style" style="width 100px; float:left; height 100px; margin:0px;">
<!-- this code asks the suer what clothing style they like. They have a lot of options. The code is like the gender code -->
Select a style: <br /> 
<label> <input type="radio" name="style" value="Casual" 
<?php 
if ($_POST['style'] == 'Casual') {
        echo "checked";
}
?>
/>Casual</label><br />

<label> <input type="radio" name="style" value="Athletic" 
<?php 
if ($_POST['style'] == 'Athletic') {
        echo "checked";
}
?>
/>Athletic</label><br />

<label> <input type="radio" name="style" value="Vintage" 
<?php 
if ($_POST['style'] == 'Vintage') {
        echo "checked";
}
?>
/>Vintage</label><br />

<label> <input type="radio" name="style" value="Formal" 
<?php 
if ($_POST['style'] == 'Formal') {
        echo "checked";
}
?>
/>Formal</label><br />

<label> <input type="radio" name="style" value="Streetwear" 
<?php 
if ($_POST['style'] == 'Streetwear') {
        echo "checked";
}
?>
/>Streetwear</label><br />

<label> <input type="radio" name="style" value="Rocker" 
<?php 
if ($_POST['style'] == 'Rocker') {
        echo "checked";
}
?>
/>Rocker</label>
</div>

<br />

<?php
if(($_POST['size'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please select a clothing size!</strong><br />";
}
?>

<div class="size" style="width 100px; float:left; height 100px; margin:0px;">
Select a size: <br />

<label> <input type="radio" name="size" value="Extra Small" 
<?php 
if ($_POST['size'] == 'Extra Small') {
        echo "checked";
}
?>
/>Extra Small</label><br />

<label> <input type="radio" name="size" value="Small" 
<?php 
if ($_POST['size'] == 'Small') {
        echo "checked";
}
?>
/>Small</label><br />

<label> <input type="radio" name="style" value="Medium" 
<?php 
if ($_POST['size'] == 'Medium') {
        echo "checked";
}
?>
/>Medium</label><br />

<label> <input type="radio" name="size" value="Large" 
<?php 
if ($_POST['size'] == 'Large') {
        echo "checked";
}
?>
/>Large</label><br />

<label> <input type="radio" name="size" value="Extra Large" 
<?php 
if ($_POST['size'] == 'Extra Large') {
        echo "checked";
}
?>
/>Extra Large</label><br />

<label> <input type="radio" name="size" value="2X Large" 
<?php 
if ($_POST['size'] == '2X Large') {
        echo "checked";
}
?>
/>2X Large</label>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />




<?php
if(($_POST['conf'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please confrim your style and size!</strong><br />";
}
?>

<!-- this checkbox makes the sure the user is satisfied with their selection. They have to select it manually, but it is sticky so if they check it and forget another field it will remain checked -->
Check to confirm your style and size <input type="checkbox" name="conf" value="conf"
<?php
if ($_POST['conf'] == 'conf') {
    echo "checked";
}
?>
/>

这就是代码现在的样子：mycode

我希望它们并排放置，不会干扰此代码下方的复选框。

Answer 1

尝试删除第 53 行中的 <br /> 标记，现在尝试:

<div class="style" style="width 100px; float:left; height 100px; margin:0px;">
<!-- this code asks the suer what clothing style they like. They have a lot of options. The code is like the gender code -->
Select a style: <br /> 
<label> <input type="radio" name="style" value="Casual" 
<?php 
if ($_POST['style'] == 'Casual') {
        echo "checked";
}
?>
/>Casual</label><br />

<label> <input type="radio" name="style" value="Athletic" 
<?php 
if ($_POST['style'] == 'Athletic') {
        echo "checked";
}
?>
/>Athletic</label><br />

<label> <input type="radio" name="style" value="Vintage" 
<?php 
if ($_POST['style'] == 'Vintage') {
        echo "checked";
}
?>
/>Vintage</label><br />

<label> <input type="radio" name="style" value="Formal" 
<?php 
if ($_POST['style'] == 'Formal') {
        echo "checked";
}
?>
/>Formal</label><br />

<label> <input type="radio" name="style" value="Streetwear" 
<?php 
if ($_POST['style'] == 'Streetwear') {
        echo "checked";
}
?>
/>Streetwear</label><br />

<label> <input type="radio" name="style" value="Rocker" 
<?php 
if ($_POST['style'] == 'Rocker') {
        echo "checked";
}
?>
/>Rocker</label>
</div>

<?php
if(($_POST['size'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please select a clothing size!</strong><br />";
}
?>

<div class="size" style="width 100px; float:left; height 100px; margin:0px;">
Select a size: <br />

<label> <input type="radio" name="size" value="Extra Small" 
<?php 
if ($_POST['size'] == 'Extra Small') {
        echo "checked";
}
?>
/>Extra Small</label><br />

<label> <input type="radio" name="size" value="Small" 
<?php 
if ($_POST['size'] == 'Small') {
        echo "checked";
}
?>
/>Small</label><br />

<label> <input type="radio" name="style" value="Medium" 
<?php 
if ($_POST['size'] == 'Medium') {
        echo "checked";
}
?>
/>Medium</label><br />

<label> <input type="radio" name="size" value="Large" 
<?php 
if ($_POST['size'] == 'Large') {
        echo "checked";
}
?>
/>Large</label><br />

<label> <input type="radio" name="size" value="Extra Large" 
<?php 
if ($_POST['size'] == 'Extra Large') {
        echo "checked";
}
?>
/>Extra Large</label><br />

<label> <input type="radio" name="size" value="2X Large" 
<?php 
if ($_POST['size'] == '2X Large') {
        echo "checked";
}
?>
/>2X Large</label>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />




<?php
if(($_POST['conf'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please confrim your style and size!</strong><br />";
}
?>

<!-- this checkbox makes the sure the user is satisfied with their selection. They have to select it manually, but it is sticky so if they check it and forget another field it will remain checked -->
Check to confirm your style and size <input type="checkbox" name="conf" value="conf"
<?php
if ($_POST['conf'] == 'conf') {
    echo "checked";
}
?>
/>

如何并排放置 2 个单选列

How to position 2 radio columns side by side

html

css

php

radio-button

css-float