Question

为了使我的单选按钮上的（）更大，我使用这个css，我在这里找了一会儿（抱歉，没有参考方便）：

     input[type=radio]
{
    /* Double-sized */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    padding: 1em;
    height: 2em; 
}

但单选按钮的（）部分遮住了文本第一个字母的一部分：

    ( )ushrooms
    ( )nchovies
    ( )xtra Cheese
    ( )reen Peppers
    ( )rtichokes

如何在按钮部分和文本之间创建一些空格？

Answer 1

添加一些右边距：margin-right: 1em;

Answer 2

我建议您检查元素，看看浏览器使用默认的用户代理CSS样式表将输入的边距应用于输入[type =“radio”]。

通常默认值为margin: 3px 3px 0px 5px;，但浏览器之间有所不同。

将其更改为margin: 3px 10px 0px 5px;，因为您需要增加输入右侧的右边距或您认为合适的任何值。如果您正在构建响应式或流畅的布局，也可以使用百分比。

每个值对应于顶部，右侧，底部，左侧。

示例：保证金：3px 10px 0px 5px; （上，右，下，左）

http://jsfiddle.net/a_incarnati/bczrs8g2/1/

这是保证金的速记属性。

使用变换和缩放来对齐单选按钮文本以更改单选按钮大小

2 个答案: