我在html5文档中有以下表格。就html和css而言,我是新手。基本上,我正在尝试通过实验来学习。
<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文件。
答案 0 :(得分:2)
请尝试以下代码。
对于“ol li label”(在css代码中),您还可以使用 margin 而不是 width 来控制标签和输入项之间的距离。
<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>
答案 1 :(得分:0)
尝试在margin-bottom
元素上使用margin-top
和input
。
有关css中的边距的详细信息,请参阅here。