我在对齐 div 时遇到问题。请看下面的html。我基本上有一个带有标签和输入字段的表单恶魔,以及一个 <p>
在输入字段的右侧。对于某些字段,<p>
元素有小文本,适合在同一行。但对于某些字段,它有更多的文本,达到 2 或 3 行。
如何设置 <p>
的 CSS元素,如果它只有一行,那么它应该显示在输入字段的中间,但如果文本超过一行,那么它就会上升。
希望我的问题很清楚。感谢您的帮助。
HTML:
<div class="container">
<label>Label</label><input class="input" />
<p>Lorem ipsum dolor. </p>
</div>
CSS:
.container{
border:1px solid black;
padding:20px;
float:left;
}
label{
line-height:2.5;
float:left;
border:1px solid green;
width:60px;
margin-right:10px;
}
input{
border:1px solid green;
height:34px;
padding:4px 6px;
width:200px;
float:left;
margin-right:10px;
}
p{
border:1px solid red;
float:left;
width:150px;
line-height:15px;
}
jsFiddle: http://jsfiddle.net/JFjx4/
最佳答案
请解释一下“它应该显示在输入字段的中间”是什么意思?可能你需要的是jsfiddle .我将“LABEL INPUT P”中的“float: left”替换为“display: inline-block”,并在“P”中添加了“vertical-align: middle”。
@Grigor:“text-wrap”是 css3 特性。它可能不适合@Roman。
关于html - CSS div 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7194521/