Question

我想使用css将复选框，标签和文本输入对齐到同一行。我可以使用浏览器的默认模板来完成。

但是我真的很喜欢这个link中给出的简单主题。主题有标签和输入文字。我想在行的开头添加一个复选框。不知何故在div中添加一个复选框会使排列错误。

虽然最好查看链接中的代码，但我在这里提供了一个快照：

HTML

<form>

    <div>
                <!--NEED TO ADD CHECKBOX HERE -->
        <label for="pub_url">Public URL</label>
        <input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
    </div>

</form>

CSS3

/* Onto the styling now. Some quick generic styles first. */

html, body {
    width: 100%; height: 100%;
}

body {
    font-size: 76%;
    font-family: Verdana;
    background: #eee;
    padding: 50px 0;
}

form {
    background: #fafafa;
    padding: 20px;
    width: 400px;
    margin: 0 auto;
    border: 1px solid #ffe2e3;
}

form div {
    /* Float containment */
    overflow: hidden;
}

/* Things are looking good now, onto the main input field
styling now! */

/*
Lets change the box model to make the label and input
contain into the 100% div.

You might want to specify the box sizing properties inside
`* {}` at the top.

Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

form label {
    font-weight: bold;
    background: linear-gradient(#f1f1f1, #e2e2e2);
    padding: 5px 10px;
    color: #444;

    border: 1px solid #d4d4d4;
    /* lets remove the right border */
    border-right: 0;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;

    line-height: 1.5em;
    width: 30%;

    /* takes the width properly now and also the
    spacing between the label and input field got removed. */
    float: left;

    text-align: center;
    cursor: pointer;
}

/* The label is looking good now. Onto the input field! */

/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
    width: 70%;
    padding: 5px;
    border: 1px solid #d4d4d4;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 4px;

    line-height: 1.5em;
    float: right;

    /* some box shadow sauce :D */
    box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
    /* No outline on focus */
    outline: 0;
    /* a darker border ? */
    border: 1px solid #bbb;
}

/* Super! */

p.s：如果有人可以像示例那样对复选框进行样式化，那将是令人愉快的

Answer 1

尝试这个，

form input[type="checkbox"] {
    width:20px;
}


<div>
    <input type="checkbox" >
    <label for="pub_url">Public URL</label>
    <input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>

http://jsfiddle.net/KW6AY/1/

Answer 2

只需重命名课程

form input加入form input[type="text"]

祝你好运。

Answer 3

在这里你快速造型：

http://codepen.io/daniesy/pen/puema

Answer 4

更改css以输入[type =“text”]并将宽度降低至约60％（因此不会影响您的复选框），添加一个带有浮动的复选框

对于下面给出的代码，将复选框和输入文本对齐在同一行中

4 个答案: