Question

我想要一个具有以下特征的水平标尺：

align:left
noshade
size:2
width:50%
color:#000000

如果不推荐使用上述属性，我会使用：

<hr size="2" width="50%" noshade style="color:#000000" align="left" />

我现在只考虑使用style属性。是否有任何技巧可以使HR在多个浏览器中呈现相同的效果？

编辑：

从答案中，我将<hr />标记重新标记为：

<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>

但是，在Firefox中， text-align：left 属性似乎没有效果，因为水平规则显示为居中。但它在Opera和IE中运行良好。我在这里试验了我的代码：

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

任何让它左对齐的技巧？

Answer 1

2015年，大多数浏览器似乎将HR渲染为具有零高度和1px插入边框的块元素。您可以更改以下属性：

p { font: italic large serif; text-align: center; }

<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred; 
           margin-right: 50%;           ">

<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred; 
           margin-left: 50%;">

<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 50%;
           margin-left: auto;
           margin-right: auto;">

Answer 2

回答你的问题：

“任何让它左对齐的技巧？”

我只想添加'display：inline-block;'到您之前代码中的style属性。您完成的代码如下所示：

<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />

我在Chrome，IE和Firefox中对此进行了测试，并且每个都有效。可以在此处找到更多文档和浏览器兼容性：CSS2 - The Display Declaration

另外，最好将此样式添加到外部或内部样式表，而不是将其添加到内联中。这样，您就可以为整个网站提供标准化的hr元素，并使您的样式声明与文档布局分开。

Answer 3

为什么不拍照，然后将这段代码输入CSS ???

<form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>

如何装饰<hr />标签

3 个答案: