0

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

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

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;

}

我将非常感谢任何回应！

问候，

罗伯特

伦敦，英国

4

3 回答 3

3

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

放一个

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

围绕每一个

然后在css中放

.whatever { display: inline-block; }

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

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

于 2013-05-26T20:50:22.713 回答
-1

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

例如：

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

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

谢谢！

于 2013-05-29T08:21:28.630 回答
-2

我使用了 Bob 的建议，但像这样

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

希望能帮助到你

于 2017-04-27T09:59:55.120 回答