Html 单选按钮和选择文本之间有巨大的空间

我是一个前端的傻瓜，永远都搞不懂这件事。由于某种原因，我看到我的单选按钮和文本之间有一个不正常的空格

我正在使用引导，我感觉它正在这样做。我怎样才能让那个空间消失？这是我有点困惑的原因

 <div class="radio">
        <h4>By Price</h4>
        <label><input type="radio" name="optradio"> Low </label>
        <br />
        <label><input type="radio" name="optradio"> High </label>

按价格
低


高

我建议使用：

<input type="radio" name="optradio"> Low <br />
<input type="radio" name="optradio"> High

Low

高

---

我很确定它会起作用。

您的标签向左浮动，这意味着它被拉到了容器的最左边。我建议您将内容包装在列中。所以像这样的东西会有用

<div class="radio col-sm-3">
    <h4>By Price</h4>
    <label><input type="radio" name="optradio"> Low </label>
    <br />
    <label><input type="radio" name="optradio"> High </label>
</div>

---

这应该是你内容的中心。

我相信这是因为“radio”类的Div默认宽度为100%。当我将.radio的css更改为width:100px（或您选择的百分比）时，单选按钮就更接近文本。您还必须使用左边距和右边距将div居中，如下所示

.radio{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

---

如上所述，单选按钮在CSS中向左浮动。 这是一个CSS规则，意味着它们将从文档流中删除。 结果是它们相对于父div进行定位，而不是根据它们与其他块级元素（标签）的关系进行定位。这将它们一直推到

表单的左侧

在外部CSS文件（不是“products.CSS”，而是带有巨大哈希名称的文件）中，找到以下行：

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

违规代码为
float:left
移除浮动，输入应直接放在文本旁边。
播放边距设置，以根据需要定位边距

.radio{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

也可以使用不同的div类

<div class="radio col-sm-3">

我也有同样的问题，后来我发现这是因为我为输入创建了一个类

    .input
    { 
        width: 200px; 
        border: 1px solid #000; 
        padding: 5px; 
    }

后来我用其他名称编辑了输入，比如

    input.a1 
    { 
        width: 200px; 
        border: 1px solid #000; 
        padding: 5px; 
    }

为我解决了问题
 你将单选按钮向左浮动。你有一个CSS规则将单选按钮向左浮动
.radio input[type=“radio”]，.radio inline input[type=“radio”]，.checkbox input[type=“checkbox”]，.checkbox inline input[type=“checkbox”]{float:left；margin left:-20px；}
如果您不理解向左浮动的意思，也许你应该读一下CSS浮动。我同意j08691关于浮动左按钮的说法。这没有任何作用，是因为它是在表单中还是什么？“它”就像我的收音机和电视节目一样。我实际上是一个前端文盲，我怎样才能让他们离开呢？（我真的不知道我是怎么做到的）-1您所做的只是删除了
标签。虽然这[可能]解决了这个问题，但表单控件上没有
标签
s会禁止残疾人和/或无法使用鼠标使用表单/站点。这个答案也很有效，我真的很感激我只能检查一个。
    input.a1 
    { 
        width: 200px; 
        border: 1px solid #000; 
        padding: 5px; 
    }