Question

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

https://www.hipchat.com/sign_up

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

Answer 1

你可以尝试这样的事情：

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

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

Answer 2

为什么需要使用DIVS和LI？

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

Answer 3

这是something让你入门。

Answer 4

你基本上会做这样的事情..从列表中剥离样式并将它们向左浮动。您还可以取出保证金：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>

Answer 5

 <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/

以报名表格对齐Div

5 个答案: