使复选框显示与输入相同

Question

我用

上的HTML和css代码创建了这个小提琴

https://jsfiddle.net/1u2632sL/1/

文本输入正确显示，但我希望能够让复选框与其标签一起显示内嵌

我用它来输入css：

.form-field input, .form-field select {
    min-width:250px;
    height:30px;
    color:#F36F25;
}

但是对于复选框输入

它的工作方式不同

Answer 1

请试试这个......

.form-field {
	margin-bottom:10px;
}
.form-field input[type="text"], .form-field select {
	min-width:250px;
	height:30px;
	color:#F36F25;
}
.form-field input[type="checkbox"] { width:50px; height:30px; }
.form-label {
	float:left;
	min-width:200px;
}

<div class="form-field">
<label>Checkbox 1</label>
<input type="checkbox">
</div>

<div class="form-field">
<label>Input 1</label>
<input type="text">
</div>

Answer 2

将高度auto添加到复选框。

以下是示例

.form-field {
	margin-bottom:10px;
	display: flex;
	align-items: center;
}
.form-field input, .form-field select {
	min-width:250px;
	height:30px;
	color:#F36F25;
}
.form-label {
	float:left;
	min-width:200px;
}
input[type='checkbox']{
	heigh: auto;
}

<div class="form-field">
<label>Checkbox 1</label>
<input type="checkbox">
</div>

<div class="form-field">
<label>Input 1</label>
<input type="input">
</div>

以下是更新后的Demo

Answer 3

将最小宽度设置为40px。这将显示其标签旁边的复选框。

Answer 4

您的文字输入样式会干扰您的复选框样式。

最好使用input[type='checkbox']和input[type='input']将输入样式指定为正确的类型。这样，您的输入之间就不会出现冲突的样式。

<强> CSS

.form-field input[type='input'] {
  min-width:250px;
  height:30px;
  color:#F36F25;
}
.form-field input[type='checkbox'] {
  vertical-align: top;
}

<强>结果

<强> JSFiddle

Answer 5

我刚刚将您的输入css更改为：

.form-field input, .form-field select {
    color:#F36F25;
}

标签旁边显示了复选框：https://jsfiddle.net/1u2632sL/2/