Question

我只是想知道是否有人知道答案。如果你这样做，你就是一位真正的网络专家！

我正在为音乐家网站创建联系表单。我有一个部分，我希望用户通过复选框选择他们想要学习的乐器：例如

x钢琴 x长笛 x唱歌 x小提琴

等

其中x是复选框。

但是我希望复选框及其标签在页面上水平对齐，例如：

x钢琴x长笛x唱x小提琴

为了缩短表单字段的长度。有没有人知道如何做到这一点，不将标签与标签分开并让标签移动到页面的另一部分？

我希望我的表单最终看起来更像这种形式：http://www.bpcollins.co.uk/contact/form （尤其是'对'服务感兴趣'部分）。

我的代码如下：

HTML：

我有兴趣学习（请勾选所有适用的选项）：

<div class="check">
<label id="checkbox">Piano</label><input id="piano" type="checkbox"              name="instrument" value="Piano">
<label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute">
<label id="checkbox">Singing</label><input id="singing" type="checkbox" name="instrument" value="Singing">
<label id="checkbox">Violin</label><input id="violin" type="checkbox" name="instrument" value="Violin">
<label id="checkbox">Keyboard</label><input id="keyboard" type="checkbox" name="instrument" value="Keyboard">
<label id="checkbox">Interview Technique for School and University</label><input id="interview_technique" type="checkbox" name="instrument" value="Interview">
<label id="checkbox">English</label><input id="english" type="checkbox" name="instrument" value="English">
<label id="checkbox">Theatre Training</label><input id="theatre" type="checkbox" name="instrument" value="Theatre">
<label id="checkbox">Speech Development</label><input id="speech" type="checkbox" name="instrument" value="Speech Development">
</div>

<br>
<hr>

<p> I want to enrole as a </p>



<label id="checkbox">Primary School Child</label><input id="primary" type="checkbox" name="child" value="Primary">      
<label id="checkbox">Secondary School Child</label><input id="secondary" type="checkbox" name="child" value="Secondary">
<label id="checkbox">Adult</label><input id="adult" type="checkbox" name="child" value="adult">





<br>

CSS：

input[type="checkbox"] {
    background-color: #fff;
    font-style: normal;
    background-position: 0px !important;
    padding: 0px;
    border-radius: 0px;
    margin: 10px;
    clear: left;



}

label#checkbox {

    float: left;
    text-align: left;
    position: relative;
    left: 40px;
    top: 18px;

}

我会非常感谢任何回应！

此致

罗伯特

伦敦英国

Answer 1

你可以尝试这样的事情......

放一个

<div class="whatever"><label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute"></div>

每个人

然后在css put

.whatever { display: inline-block; }

如果这不起作用，请尝试.whatever {foat：left;有或没有display：inline-block

确保您的.check容器类足够宽，以允许显示完整的复选框标签和输入

Answer 2

谢谢草坪人。我实际上发现了一个更好的技术是将复选框及其标签对齐在表格中，然后添加填充和边距以在单元格之间添加一些空间。

例如：

        <table>
        <tr>
            <td><label id="checkbox">Piano</label><input id="piano" type="checkbox" name="instrument" value="Piano" class="required" title="Please check at least one option.">
            </td>

            <td>
            <label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute">
            </td>

            <td>
            <label id="checkbox">Singing</label><input id="singing" type="checkbox" name="instrument" value="Singing">
            </td>
        </tr>


        <tr>
            <td>
            <label id="checkbox">Violin</label><input id="violin" type="checkbox" name="instrument" value="Violin">
            </td>


            <td>
                <label id="checkbox">Keyboard</label><input id="keyboard" type="checkbox" name="instrument" value="Keyboard">
            </td>


            <td>
                <label id="checkbox">Interview Technique</label><input id="interview_technique" type="checkbox" name="instrument" value="Interview">
            </td>
        </tr>

        <tr>


            <td>
                <label id="checkbox">English</label><input id="english" type="checkbox" name="instrument" value="English">
            </td>


            <td>
                <label id="checkbox">Theatre Training</label><input id="theatre" type="checkbox" name="instrument" value="Theatre">
            </td>


            <td>
                <label id="checkbox">Speech Development</label><input id="speech" type="checkbox" name="instrument" value="Speech Development">
            </td>

        </tr>
    </table>

您的技术有效，但不提供上述方法附带的对齐和演示。

谢谢！

Answer 3

我使用了鲍勃的建议但是喜欢这个

.whatever { display: inline-block; } 
.whatever input, .whatever label{ float:left !important; }

希望有所帮助

联系表格：复选框和标签的水平对齐方式

3 个答案: