与对齐文本框

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