HTML5 div 样式不起作用答案

【问题标题】：HTML5 div styles not workingHTML5 div 样式不起作用
【发布时间】：2012-05-19 01:33:37
【问题描述】：

我的页面（使用 HTML5）在没有 doctype 的情况下可以正常工作，但是当我添加 HTML5 doctype 时，<div>s 上的样式似乎不起作用（特别是应该对齐的一个 <div>距左侧 20 个像素未对齐...另一个 <div> 应该有 90% 的高度恢复到默认高度...另一个 <div> 我已经更改了行间距和字符间距似乎使用默认的行距和字符间距）。 <span>s 上的样式虽然工作得很好……但似乎只有 <div>s 有问题。我已将 <div> 更改为 <section>... 仍然无法正常工作。我尝试过内联样式，然后切换到样式表……似乎都不管用。我扔了一些display:block;（不确定那是什么），但它似乎没有做任何事情。
顺便说一句，代码没有任何问题。我通过验证器运行它，它完全没有错误。

【问题讨论】：

如果可能，请转到jsfiddle.net 并创建一个独立的示例来说明您的问题。
这是我的页面，其中的内容已被删除：link。这是完全相同的内容，但删除了 doctype：link。你会看到它看起来不一样......某些部分的对齐方式不同（更多的是我想要的方式），当你点击按钮时，文本将全部显示在没有 doctype 的页面上（与带有HTML5 doctype，它只显示几行并添加了一个滚动条......这不是我想要的）。
我为你制作了一个可以帮助你的人 - jsfiddle.net/Px4wh
谢谢...我不确定如何使用 jsfiddle.net，所以我没有打扰。但是有一个问题......在 jsfiddle.net 版本上，该按钮由于某种原因无法正常工作。只是指出这不是我的代码，因为它在我提供的链接中有效。

标签： html styles

【解决方案1】：

你的 CSS 有错误

.indented {
    display: block;
    left: 20;
    position: relative;
}

应该是：

.indented {
    display: block;
    left: 20px;
    position: relative;
}

请注意，您必须为 20 的值指定一个单位值 - 否则它可能会被忽略（这就是导致您的问题的原因！）

【讨论】：