我一直在努力解决这段恼人的代码.你认为我已经有足够的css练习了,但是和往常一样,这对我很有影响.
我的问题如下,我有以下css：
.FORM ul li label {
margin-top: 50px; //<--------------THE PROBLEM
height: 20px;
max-height: 20px;
width: 100px;
min-width: 100px;
}
.FORM ul li {
list-style: none;
width: 500px;
height: 100px;
min-width: 500px;
min-height: 100px;
background: #ddd;
border-top: #eee 1px solid;
border-bottom: #bbb 1px solid;
padding: 10px 10px;
margin: auto;
}
ul {
background: #ccc;
padding: 10px 10px 10px 10px;
width: 530px;
margin: auto;
}
body {
background: #cfc;
padding: 0px;
margin: 0px;
}
.FORM {
background: #fcc;
}
它控制的HTML是：
<form class="FORM">
<ul>
<li>
<label for="workersAddr">Worker's Address:</label>
<input type='text' id='workersAddr' class='validate[required,minSize[5]]'/>
</li>
</ul>
</form>
请注意在margin-top下面的图片中如何：50px;完全没有效果？
我该如何解决这个问题？
解决方法
垂直边距和填充仅在块级元素和< label>中有效.是一个内联元素.您可以使用其他属性模拟它或转换为内联块：
.FORM ul li label {
display: inline-block;
}
