在html中对齐div中的不同元素

Question

我是php的新手。

我正在使用以下代码来显示表单

<div class="wrapperReg">

        <div id="searchContainer" style="display: inline; margin-top: 20px">
          <form>
             <label class="ringSetName" style="font-size: 16pt;" >Firstname</label>
             <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>         
          </form>
       </div>

       <div id="searchContainer" style="display: inline; margin-top: 20px">
          <form>
             <label class="ringSetName" style="font-size: 16pt;" >Lastname</label>
             <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>         
          </form>
       </div>

       <div id="searchContainer" style="display: inline; margin-top: 20px">
          <form>
             <label class="ringSetName" style="font-size: 16pt;" >Email</label>
             <input id="nameBox" style="width:250px; margin-top:10px; margin-left:30px; height:30px;" name="q" type="text"/>          
          </form>
       </div>

       <div id="searchContainer" style="display: inline; margin-top: 20px">
          <form>
             <label class="ringSetName" style="font-size: 16pt;" >Phone</label>
             <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>         
          </form>
       </div>

     <div class="submit" style="display: inline;" style="margin-top: 10px">
            <input type="button" value="Submit" class="submit-text"/>
     </div>

CSS如下

.wrapperReg{
    overflow: hidden;
    width: 100%;
    height: 100%;    
}

它显示的内容如下

我如何对齐以便所有元素在主div内水平对齐，而Text应该是基本对齐的，并且输入文件也应垂直对齐每个元素。

还需要将提交按钮水平对齐。

Answer 1

label {float: left; width: 200px; clear: left}
label + input {float: left; width: 150px}

ID在整个文档中应该是唯一的，使用class for searchContainer。

Answer 2

如何使用float？

label{float: left;}
label + input{float: right;}

并向您的form添加overflow：hidden。并以一种形式包装表单元素。