0

在此处输入图像描述

我正在尝试在heroku（主要是javascript）上制作一个调查网络应用程序，而这些单选按钮上的偏离中心的文本相当烦人。有什么简单的方法可以让它居中并稍微滑到一边？格式化现在都是用 CSS 完成的。目前我如何格式化这些无线电输入是这样的......

.radio-input{
    background: #D4E7ED;
    padding:20px 10px;
}
4

2 回答 2

1

您可以使用vertical-align: middle标签和单选按钮与标签对齐文本和单选按钮padding-top: 1%：

label {
    vertical-align: middle;
    padding-top: 1%;
}
.rdo{
    vertical-align:middle;
}

演示

于 2013-04-18T16:47:44.010 回答
1

这是我使用 Coder 概述的类似方法创建的示例。它包括您指定的背景颜色，并将单选按钮和文本包装在 div 中。它对我来说似乎表现得很好：

的CSS：

.radio-input {
    padding-top:20px;
    vertical-align:top;
}
.radio-input-text {
    vertical-align:bottom;
}
.background {
    background: #D4E7ED;
    width:300px;
}

的HTML：

<div class="background">
    <div class="radio-input">
        <input type="radio" value="Great" id="Great" /><span class="radio-input-text">Great</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Okay" id="Okay" /><span class="radio-input">Okay</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Very Bad" id="VeryBad" /><span class="radio-input">Very Bad</span>
    </div>
</div>

演示

于 2013-04-18T18:36:08.167 回答