對齊旁邊的文字輸入元素

Question

我試圖對準旁邊的開關輸入元素的文本。一個示例圖像顯示，我希望它看起來像。該文本應該在紅色框中。劃掉的部分應該是空的。

我一個小例子代碼：
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: flex;代替display: block;父元素。

類似下面：

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

使用顯示：內聯塊;兩個要素或設置垂直對齊頂部，如果你們已經設置高度或行高並要設置它在中間，從而使其垂直居中對齊。

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>