对齐文本框的问题

Question

我有这个代码1，它在图1中创建了scnario。

 <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%;}