入力要素の横にテキストを整列する

Question

imput要素の隣にテキストを配置しようとしています。私はそれがどのように見えるようにするには、表示する画像の例。テキストは赤いボックスに入っているはずです。横切った部分は空にする必要があります。

最小限例えば私のコード：
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; 
} 

Answer 1

これは非常に簡単にflexを使用して行うことができます。

親要素のdisplay: block;の代わりにdisplay: flex;を使用してください。以下のような

何か：

label { 
 
    float: left; 
 
    display: block; 
 
} 
 

 
.group { 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 

 
input { 
 
    height: 20px; 
 
} 
 

 
.infotext { 
 
    display: inline-block; 
 
}

<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>

Answer 2

私が変更されているこれらの次されている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

Answer 3

display：inline-block;を両方の要素で使用するか、高さや線の高さを設定して中間に設定したい場合は、vertical align topを設定します。

input {display:inline-block;height:40px;} 
.className { 
    display:inline-block; 
    height:40px; 
    line-height: 40px; 
    vertical-align:middle; 
} 

Answer 4

あなただけのクラス情報テキストにこのコードを作ることができます。

.infotext { 
 
    display: inline; 
 
}

label { 
 
    float: left; 
 
    display: block; 
 
} 
 
.group { 
 
    display: block; 
 
    margin-bottom: 10px; 
 
} 
 

 
.infotext { 
 
    display: inline; 
 
}

<form method="post"> 
 
\t <div class="group"> 
 
\t \t <label>Label1</label> 
 
\t \t <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> 
 
\t </div> 
 
\t <div class="group"> 
 
\t <label>Label2</label> 
 
\t \t <input name="title" type="text" value="Something2"> 
 
    <span class="infotext">Some infotext</span> 
 
\t </div> 
 
</form>