與對齊文本框

Question

我有這樣的代碼1它將創建圖片scnario 1.

<p>Ditt namn (obligatorisk)<br />       
    [text* your-name]</p>           

<p>Din epost (obligatorisk)<br /> 
    [email* your-email] </p> 

<p>Ditt telefonnummer<br /> 
    [tel tel-621] </p> 

<p>Ämne<br /> 
    [select menu-101 include_blank "Konstruktions ritningar" "Visualisering" "Mjukvara utveckling" "Övrigt"]</p> 

<p>Ditt meddelande<br /> 
    [textarea your-message] </p> 

<p>[submit "Skicka"]</p> 

的努力之後，我似乎無法得到的消息框小時權的問題出現在ditt namn -box。有沒有人知道我可以做些什麼來以某種方式將消息框對齊到Ditt namn？

感謝任何形式的幫助，

/Rinor

Answer 1

可以使用display:inline-block;實現這一目標。見下面例子：

HTML：

<div class="left"> 
    <p>Ditt namn (obligatorisk)<br />       
    [text* your-name]</p> 
    <p>Din epost (obligatorisk)<br /> 
    [email* your-email] </p> 
    <p>Ditt telefonnummer<br /> 
    [tel tel-621] </p> 
    <p>Ämne<br /> 
    [select menu-101 include_blank "Konstruktions ritningar" "Visualisering" "Mjukvara utveckling" "Övrigt"]</p> 
</div> 
<div class="right"> 
    <p>Ditt meddelande<br /> 
    [textarea your-message] </p> 
</div> 
<p>[submit "Skicka"]</p> 

CSS：

.left, .right {display: inline-block; vertical-align: top; width:45%;}