我正在尝试将文字对齐到一个输入元素旁边。要显示的示例图像,我希望它看起来如何。该文本应该在红色框中。划掉的部分应该是空的。
我的代码是一个最小的例子:
https://jsfiddle.net/5m0yjus7/
HTML
<form method="post">
<div class="group">
<label>Label1</label>
<input name="title" type="text" value="Something">
<span class="infotext">Lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
</div>
<div class="group">
<label>Label2</label>
<input name="title" type="text" value="Something2">
<span class="infotext">Some infotext</span>
</div>
</form>
CSS
label {
float: left;
display: block;
}
.group {
display: block;
margin-bottom: 10px;
}
.infotext {
display: inline-block;
}
答案 0 :(得分:1)
您可以使用flex
轻松完成此操作。
在父元素上使用display: flex;
代替display: block;
。
如下所示:
label {
float: left;
display: block;
}
.group {
display: flex;
margin-bottom: 10px;
}
input {
height: 20px;
}
.infotext {
display: inline-block;
}
&#13;
<form method="post">
<div class="group">
<label>Label1</label>
<input name="title" type="text" value="Something">
<span class="infotext">Lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
</div>
<div class="group">
<label>Label2</label>
<input name="title" type="text" value="Something2">
<span class="infotext">Some infotext</span>
</div>
</form>
&#13;
答案 1 :(得分:1)
以下是我已经改变的css:
.infotext {
display: inline-block;
width:50%;
}
input{
vertical-align:top;
}
label {
float: left;
display: block;
}
.group {
display: block;
margin-bottom: 10px;
}
.infotext {
display: inline-block;
width: 50%;
}
input {
vertical-align: top;
}
<form method="post">
<div class="group">
<label>Label1</label>
<input name="title" type="text" value="Something">
<span class="infotext">Lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
</div>
<div class="group">
<label>Label2</label>
<input name="title" type="text" value="Something2">
<span class="infotext">Some infotext</span>
</div>
</form>
答案 2 :(得分:1)
在两个元素上使用 display:inline-block; ,或者如果设置了高度或行高,则设置垂直对齐顶部,并希望将其设置在中间,以使其垂直对齐中间。
input {display:inline-block;height:40px;}
.className {
display:inline-block;
height:40px;
line-height: 40px;
vertical-align:middle;
}
答案 3 :(得分:0)
您可以将此代码设置为类信息文本:
.infotext {
display: inline;
}
&#13;
label {
float: left;
display: block;
}
.group {
display: block;
margin-bottom: 10px;
}
.infotext {
display: inline;
}
&#13;
<form method="post">
<div class="group">
<label>Label1</label>
<input name="title" type="text" value="Something">
<span class="infotext">Lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
</div>
<div class="group">
<label>Label2</label>
<input name="title" type="text" value="Something2">
<span class="infotext">Some infotext</span>
</div>
</form>
&#13;