以报名表格对齐Div

时间:2011-09-16 20:50:39

标签: css html

我想为注册表单编写HTML,看起来就像以下链接中的那样:

https://www.hipchat.com/sign_up

问题是,我想使用div标签,ul和li元素来创建表单而不是HTML表格。我很难弄清楚如何使用css类来对齐字段指令和文本框输入。

5 个答案:

答案 0 :(得分:1)

你可以尝试这样的事情:

<ul>
   <li>
       <label>Name:</label><input class="textbox" type="text" size="30" />
   </li>
</ul>

继续尝试一些css样式,margin float .......

答案 1 :(得分:0)

为什么需要使用DIVS和LI?

使用标签和表单元素...... www.w3c.org将提供帮助

答案 2 :(得分:0)

这是something让你入门。

答案 3 :(得分:0)

你基本上会做这样的事情..从列表中剥离样式并将它们向左浮动。 您还可以取出保证金:0自动;如果你不想让它居中。

.container {margin: 0 auto; width: 300px;}
.container ul {margin: 0; padding: 0; list-style: none; float: left; width: 50%;}


<div class="container">
<ul>
<li>name</li>
<li>email</li>
</ul>

<ul>
<li><input type="text" name="email" /></li>
<li><input type="text" name="email" /></li>
</ul>
</div>

答案 4 :(得分:0)

 <form  method="post">
                <div class="field"> 
                    <label for="name">name</label> 
                    <input id="name" name="name" type="text" /> 
                </div> <div class="field"> 
                    <label for="email">email</label> 
                    <input id="email" name="email" type="text" /> 
                </div> <div class="field"> 
                    <label for="job title">job title</label> 
                    <input id="job title" name="job title" type="text" /> 
                </div> 
                </form> 

这是更好的选择使用它,不要使用Ul-li使用DIV

这里是链接http://jsfiddle.net/sahil20grover1988/JLbbw/