我没有网页设计师的经验,但为了更多地了解CSS,我正在为自己的页面做样式表.我知道我现在这样做的方式可能很糟糕,不是推荐的方式,但请帮助我理解为什么这不起作用.
我有这样的形式:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
在包含我自己的样式表之前,我已经包含了Eric Meyer的CSS重置,我在CSS中有这个规则:
#registration_form label {
width: 100px;
}
我也尝试过:
label {
width:100px;
}
我尝试将值更改为100px以上,但仍未应用.如果它有帮助,我有一个布局,其中包含这样的内容:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
这是一个jinja2模板,当渲染时,body的内容会被一些不同的视图添加.以下是这些id的样式:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
为什么我的标签样式不适用？
我相信,<label>有display:inline预设选项,width并height不会影响它.尝试添加display: inline-block它.
补充:正如成员Geoff Adams在评论中指出的,存在一些浏览器兼容性问题display: inline-block.在这个特定的情况下它应该工作,但在这里看到更多信息.