Question

在以下屏幕截图中显示的HTML布局中，我希望单选按钮完全位于Yes和No标签下，但CSS padding属性似乎不适用于HTML input标记。代码是给出的。

如何更改内嵌 style，以便单选按钮位于“是”和“否”标签下。

enter image description here

<html>
    <div style="padding:25px;">
        <div style="background-color:#bf5b5b; ">
            <label style="padding-left:25px; padding-right:25px;">Yes</label>
            <label style="padding-left:25px; padding-right:25px;">No</label>
            <label style="padding-left:25px; padding-right:25px;"></label>
        </div>
        <div id="option_one_div" style="background-color:#74d4dd;">
            <input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
            <label style="padding-left:25px; padding-right:25px;" for="option_one_div">Label of first group of Radio Buttons</label>
        </div>
        <div id="option_two_div" style="background-color:#36d666;">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
            <label style="padding-left:25px; padding-right:25px;" for="option_two_div">Label of second group of Radio Buttons</label>
        </div>
    </div>
</html>

Answer 1

padding的想法是它在元素中增加了空间。您似乎试图在元素之外添加空格，您应该使用margin。

这张图片可能有助于解释这个概念。

box model example http://www.w3schools.com/css/box-model.gif

关键是，要在元素周围添加空间，通常使用边距而不是填充另一方面，很多人在给身体添加填充物时犯了这个错误;他们使用保证金而产生不可预测的结果。）

Here's an example fiddle使用您的代码，只使用边距而不是填充（我修改了像素以使其正常工作）。

Answer 2

将span标记放在input标记左侧填充：

以下是JSFiddle

Answer 3

Here's my Fiddle

<input style="margin-left: 5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
<input style="margin-left: 7.5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">

我使用了margin-left和百分比值。看起来就像您所描述的那样 - 如果需要，您可以随时用像素值替换百分比。

Answer 4

在你的第二个分组中，即

<div id="option_one_div" style="background-color:#74d4dd;">

的

<input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">

这里padding-left有125像素。将它改为25像素你的概率将被解决。

Answer 5

你好，为什么不这样做：

<html>
    <div>
        <div style="background-color:#bf5b5b; width:100%; float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of first group of Radio Buttons</label>
        </div>
        <div style="background-color:#74d4dd; width:100%;  float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of teo group of Radio Buttons</label>
        </div>
        <div style="background-color:#36d666; width:100%;  float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of three group of Radio Buttons</label>
        </div>
    </div>
</html>

然后只需添加一些@ media css类，使其具有完全的移动响应和堆栈功能。

这将为您的潜在网站用户提供更多功能，因为他们可以通过移动设备轻松查看，并且可以从PC上轻松查看。

如何将填充应用于HTML输入元素？

5 个答案: