Question

我是前端愚蠢的，无法想象这些东西。出于某种原因，我在单选按钮和文本之间看到了异常的空间。

我正在使用bootstrap，我觉得好像在做这件事。我怎样才能让那个空间消失？目前没有任何保证金或任何内容，这就是为什么我有点困惑。

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

Answer 1

你的标签是向左浮动的，这意味着它被拉到你容器的最左边。我建议将您的内容包装在列中。所以这样的事情会起作用......

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

如果您的内容没有居中，我会将其添加到您的CSS ...

.radio {
    margin: 0 auto;
}

这应该是你的内容的中心。

Answer 2

我相信它是因为Div与班级＆＃34;收音机＆＃34;默认宽度为100％。当我将.radio的css更改为宽度：100px（或您选择的百分比）时，单选按钮更接近文本。您还必须使用margin-left和margin-right将div居中，如下所示

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

Answer 3

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

在外部CSS文件中（不是＆＃34; products.css＆＃34;但是那个带有巨大的散列名称的文件）找到这一行：

.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; 移除浮动，输入应直接放在文本旁边。使用边距设置进行播放以根据需要进行定位。

Answer 4

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

还使用不同的div类。

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

Answer 5

我建议使用：

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

我很确定它会起作用。

Answer 6

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

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

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

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

问题就解决了；

单选按钮和选择文本之间有大量空间

6 个答案: