【问题标题】:How to add spacing between two radio buttons that are next to each other如何在彼此相邻的两个单选按钮之间添加间距
【发布时间】:2019-02-18 09:04:26
【问题描述】:

我很难在两个相邻的单选按钮之间添加间距。它们之间的距离太近了,我不喜欢,我觉得如果我在它们之间添加一些间距会更好看。我说的是宽度,而不是它们的高度。

我已经尝试添加填充和边距。我不太确定如何在两者之间添加间距。

<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>

我想知道如何在两个单选按钮之间添加间距,这样它们就不会非常接近。我没有在 div 类中添加任何 CSS。这是它现在的样子:mycode

【问题讨论】:

  • 请仅包含我们解决您的问题所必需的代码
  • 您在哪里为单选按钮添加填充/边距?这不在您的代码中。
  • 使用&amp;nbsp; 作为不间断空格,或CSS 边距...style="margin-left: 10px" 不要使用文本格式设置样式。这就是 CSS 的用途。
  • 您想在单选按钮之间垂直添加空格还是在div之间添加空格?

标签: php html css radio-button styling


【解决方案1】:

只需在您的第一个 div 上应用 margin-right: 50px;(更改值以适合您的需要),例如

<div class="style" style="width 100px; float:left; height 100px; margin-right: 50px;">

【讨论】:

    猜你喜欢
    • 2021-12-31
    • 2018-06-20
    • 1970-01-01
    • 2020-04-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-30
    • 2021-05-08
    • 2017-05-13
    相关资源
    最近更新 更多