HTML – 为什么css边距不起作用?

我一直在努力解决这段恼人的代码.你认为我已经有足够的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;
}
相关文章
相关标签/搜索