Question

我一直在尝试为以下内容（包括垂直对齐）获得合适的样式：

input {
    vertical-align:bottom;
    top:-5px;
}
label {
    display:inline;
}

<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>

问题是，在我添加<h6>标头标签后，它不会再进入一行了。但是我确实需要那里<h6>。我最初认为标签宽度不够宽，导致它下降，但即使在向width css添加慷慨label之后，也没有任何变化。

我还能做些什么吗？

Answer 1

默认情况下，标题元素为display:block，您需要为display:inline-block添加h6

input {
  vertical-align:middle;
}
label {
  display:block;
}
label h6{
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>

Answer 2

试，

label{
  display: block;
}
input, h6{
  display: inline-block
  vertical-align: middle;
}

从输入中移除顶部。

Answer 3

这是另一个例子：

＆＃13;

label {
  display:table;
}
label input,label h6{
  display:inline;
  vertical-align: middle;
}

＆＃13;

<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>

＆＃13;

复选框标题和一个标签中的文本

3 个答案: