CSS div對齊

我在對齊的div有問題。請看下面的html。我基本上有一個帶有標籤和輸入字段的表單惡魔，並且在輸入字段的右側有一個<p>。對於某些字段，<p>元素的文本很小，可以放在同一行上。但是對於一些領域，它有更多的文字轉到2或3行。如何設置<p>元素的CSS，如果它只有一行，那麼它應該顯示在輸入字段的中間，但是如果文本超過一行，那麼它就會上升。希望我的問題很明確。謝謝你的幫助。CSS div對齊

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/

來源

2011-08-25 Roman

請解釋你的意思「應該在中間顯示的輸入域」？可能是你需要的是jsfiddle。 'LABEL INPUT P'中的'float：left'替換爲'display：inline-block'，並在'P'中添加了'vertical-align：middle'。

@Grigor：「text-wrap」是css3功能。 @羅曼可能不合適。

來源

2011-08-25 18:02:39 mixel

謝謝，這正是我一直在尋找的。對不起，如果我不能更好地解釋。 – Roman

設定一個固定的寬度，並把text-wrap: normal;

來源

2011-08-25 17:22:28 Grigor

您可以爲您的表格添加3列。最後一個（與P），你可以在你的CSS與vertical-align:middle樣式

編輯您的jsfiddle HTML這樣的：

<div class="container"> 
    <table> 
     <tr> 
      <td><label>Label</label></td> 
      <td><input class="input" /></td> 
      <td style="vertical-align:center"><p>Lorem ipsum asdf asd </p></td> 
     </tr> 
    </table> 
</div>

來源

2011-08-25 17:25:06 Luke

這是我對你的問題的解釋 – Luke

想告訴我爲什麼這是錯的，值得-1？ – Luke

我不是一個推薦的插件，因爲它通常不幫你學習...但在這種情況下，因爲你需要不同的位置取決於長度，並且因爲它聽起來像你正在使用的表單驗證...我建議使用這個提示性的工具提示。它是一種非常直接的方式來添加消息，也可以根據您的需要在輸入元素周圍移動。

http://onehackoranother.com/projects/jquery/tipsy/

來源

2011-08-25 17:25:34 Kristian

回答

相關問題