对齐输入元素旁边的文本

时间:2016-12-08 11:56:52

标签: html css

我正在尝试将文字对齐到一个输入元素旁边。要显示的示例图像,我希望它看起来如何。该文本应该在红色框中。划掉的部分应该是空的。

enter image description here

我的代码是一个最小的例子:
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;
}

4 个答案:

答案 0 :(得分:1)

您可以使用flex轻松完成此操作。

在父元素上使用display: flex;代替display: block;

如下所示:

&#13;
&#13;
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;
&#13;
&#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>

DEMO

答案 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)

您可以将此代码设置为类信息文本:

&#13;
&#13;
.infotext {
  display: inline;
}
&#13;
&#13;
&#13;

&#13;
&#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;
&#13;
&#13;