对齐< hr>以符合HTML5的方式放置在左侧 [英] Align <hr> to the left in an HTML5-compliant way

问题描述

目前，我正在使用

 < hr align =left/> 
  

在我的HTML5页面上，但我读过了，align属性在XHTML 4.01中被弃用，从HTML5中删除。我想要使​​用CSS而不是像这样的内联属性，但是当我尝试时

  hr {align：left; max-width：800px;} 
  

或 hr {text-align：left ;} 或 hr {left：0;} 或 hr {float：left;}

那么我应该用什么来代替上面的内联属性？

你试图以某种方式使用某些东西（就像Eliezer Bernart提到的那样，显然这个评论的链接是 MDN文档消失了）不再以这种方式工作。你可以，只要你不介意在IE中搞砸了，只需设置边界为零 - http://jsfiddle.net/s52wb /

  hr {
最大宽度：100px; 
 margin：0px; 
} 
  

一个更好的主意是模仿人力资源部门过去的做事方式，没有使用HR的CSS方式。查看 http://jsfiddle.net/p5ax9/1/ 进行演示：

  p：first-child：before {
 display：none; 
} 
 p：在{
 content：; 
 border：1px纯黑色; 
 margin-top：15px; 
 margin-bottom：15px; 
 display：block; 
最大宽度：100px; 
} 
  

Currently, I'm using

<hr align="left" />

on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried

hr{align: left; max-width: 800px;}

or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.

So what should I use instead of the inline attribute above?

解决方案

You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:

p:first-child:before {
    display: none;
}
p:before {
    content: " ";
    border: 1px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    max-width: 100px;
}

这篇关于对齐< hr>以符合HTML5的方式放置在左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！