hr{height:1pxborder:noneborder-top:1px solid Blackmargin:0*margin:0 0 -14px 0float:none*float:leftdisplay:block}
<div class="hr" style="border-top:1px solid #000000"></div>因为hr为水平线，所以上面的border-top也可写成：border-bottom
（根据情况！）
问题出在你错用了<p>！！！
<p>的作用并不是仅仅换行，它是一个区块来的，即使你只用了<p>，最终浏览器也会自动按<p>...</p>来处理的！因此：
<input type="text" id="text1" name="text" class=""><div class="font">   <<<请输入第一位非零的六位订单号</div><p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text"><div class="font">   <<<请输入不能超过12个汉字的</div>
就相当于
<input type="text" id="text1" name="text" class=""><div class="font">   <<<请输入第一位非零的六位订单号</div><p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text"><div class="font">   <<<请输入不能超过12个汉字的</div>
</p> 浏览器会自动添加这个！
但是，有一点很特殊的是，<p>...</p>里面是不能包含<div>...</div>的！它会自动跳到<p>的外面，所以实际上就变成：
<input type="text" id="text1" name="text" class=""><div class="font">   <<<请输入第一位非零的六位订单号</div><p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text">
</p>
<div class="font">   <<<请输入不能超过12个汉字的</div>
这样的话，这个div里面的内容就会自动换行了，这跟它是否inline是无关的，因为换行是由<p>造成的
而第一个div因为没有被包含到<p>里面，所以它不受影响，不会换行。
解决的办法很简单，只要把所有<p>换成<br>就行了！！！
总结：不要乱用<p>，用的时候要成对来用，一定要把它当作类似<div>的区块来用，但要注意<div>里面可以包含<p>，但<p>里面不能包含<div>！如果是仅仅需要换行，就用<br>吧！
