HTML人力资源问题

Question

嗨，我今天在配置我的html页面时遇到了问题。我的示例代码是：

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>
<hr>Text after hr

正如你所看到的，人力资源部没有做他的工作，因为它没有出现在我设定的位置。

它应如下所示：

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>Only if i add text in this position the following hr works, how to fix it?
<hr>Text after hr

问题是，在部门之后，人力资源没有出现！

我得先发些短信..。为什么要这么做？

Answer 1

<hr>就在那里，你只需要一个电子显微镜就可以看到它。尝试：

<hr style="width: 100%; float:left">Text ...

示例：

http://jsfiddle.net/pqaukpjf/7/

还注意到：

HTML 4.01与HTML5的差异

• 在HTML5中，<hr>标记定义了主题中断。
• 在HTML4.01中，<hr>标记表示一个水平规则。

<hr>标记现在被定义为语义术语，而不是表示术语。所有布局属性都在HTML5中删除。使用CSS代替。

Answer 2

尝试像这样：演示

CSS：

hr{
    clear:both;
    height:2px;
    border-bottom:1px solid #ccc;
}