以html格式表示的Allignment问题

2011-05-12 73 views 1 likes

我在html5文档中有以下表单。就html和css而言，我是一个新手。基本上，我试图通过试验来学习。以html格式表示的Allignment问题

<form> 
    <ol style="list-style:none"> 
     <li style="display: inline"> 
      <label for="fname">First Name</label> 
      <input id="fname" type="text"> 
     </li> 
     <li style="display: inline"> 
      <label for="lname">Last Name</label> 
      <input id="lname" type="text"> 
     </li> 
     <li> 
      <label for="dept">Department</label> 
      <input id="dept" type="text"> 
     </li> 
    </ol> 
</form>

来到我面对的挑战，

1）我需要知道我可以控制标签和输入框之间的间距。

2）还有两个li（名字和姓氏）之间的空格。

PS：我也有控制字体，颜色，输入宽度等CSS文件

来源

2011-05-12 user700284

“label”元素的'for'属性引用了它所关联控件的'id'。您的表单控件上没有ID。 – Quentin 2011-05-12 09:19:20

对不起..那是一个错字。编辑了代码。 – user700284 2011-05-12 11:46:10

没有名字的输入不能成功控制。 – Quentin 2011-05-12 11:46:50

回答

尝试在您input元件使用margin-bottom和margin-top。

请参阅here了解更多关于边缘在CSS中的信息。

来源

2011-05-12 08:53:31

thanks.that为我做了诡计。 – user700284 2011-05-12 12:06:29

请尝试下面的代码。

对于“OL李标签”（在CSS代码）也可以使用余量代替宽度，控制标签和输入项目之间的距离。

<head> 
    <style> 
    ol{ 
     margin:0; 
     padding:0; 
    } 
    ol li{ 
     margin:0 0 10px 0; 
    } 
    ol li label{ 
     width:150px; 
     float:left; 
    } 
    ol li input{ 
     float:left; 
    } 
    </style> 
</head> 

<body> 
    <form> 
     <ol> 
      <li> 
       <label for="fname">First Name</label> 
       <input name="fname" type="text"> 
      </li> 
      <li> 
       <label for="lname">Last Name</label> 
       <input name="lname" type="text"> 
      </li> 
      <li> 
       <label for="dept">Department</label> 
       <input id="dept" type="text"> 
      </li> 
     </ol> 
    </form> 
</body>

来源

2011-05-12 09:22:24 zekia

以html格式表示的Allignment问题

回答

相关问题