blocks|key|4685165|text|执行此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4685166|hr+{
+++display:+inline;++//or+inline-block
+++text-align:+left;
}|code-block|syntax|javascript|4685167|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>do this</p>

<pre><code>hr {
   display: inline;  //or inline-block
   text-align: left;
}
</code></pre>


blocks|key|4685183|text|一种选择是将左边距设置为零：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4685184|hr{max-width:+800px;+margin-left:0;}|code-block|syntax|javascript|4685185|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>One option would be to set the left margin to zero:</p>

<pre class="lang-css prettyprint-override"><code>hr{max-width: 800px; margin-left:0;}
</code></pre>


blocks|key|179263|text|你试图以某种方式使用某种东西(就像Eliezer+Bernart提到的那样..显然，与the+MDN+doc的链接的评论消失了)不再“以这种方式工作”。你可以，只要你不介意它在IE中被扭曲，只需将边距设置为零-+http://jsfiddle.net/s52wb/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|179264|hr+{
++++max-width:+100px;
++++margin:+0px;
}|code-block|syntax|javascript|179265|然而，一个更好的想法是模仿HR的旧方式，通过CSS来做事情，而不使用HR。查看http://jsfiddle.net/p5ax9/1/的演示：|179266|p:first-child:before+{
++++display:+none;
}
p:before+{
++++content:+"+";
++++border:+1px+solid+black;
++++margin-top:+15px;
++++margin-bottom:+15px;
++++display:+block;
++++max-width:+100px;
}|179267|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr|1|http://jsfiddle.net/s52wb/|2|http://jsfiddle.net/p5ax9/1/^0|17|B|0|2Y|Q|1|0|0|13|S|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

<p>You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr">the MDN doc</a> 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 - <a href="http://jsfiddle.net/s52wb/">http://jsfiddle.net/s52wb/</a></p>

<pre><code>hr {
    max-width: 100px;
    margin: 0px;
}
</code></pre>

<p>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 <a href="http://jsfiddle.net/p5ax9/1/">http://jsfiddle.net/p5ax9/1/</a> for a demo:</p>

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


blocks|key|4685259|text|您可以使用div标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4685260|<div+style="border:+thin+solid+lightgray;+width:+100px;"></div>|code-block|syntax|javascript|4685261|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use div tag instead. </p>

<pre><code>&lt;div style="border: thin solid lightgray; width: 100px;"&gt;&lt;/div&gt;
</code></pre>


blocks|key|179319|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179320|.line+{
++++height:+2px;
++++background-color:+var(--itemBorder);
++++color:+var(--itemBorder);
}
.width100+{
++++width:+100%25+!important;
}
.width90+{
++++width:+90%25+!important;
}
.width80+{
++++width:+80%25+!important;
}
.width70+{
++++width:+70%25+!important;
}
.width60+{
++++width:+60%25+!important;
}
.width50+{
++++width:+50%25+!important;
}
.width40+{
++++width:+40%25+!important;
}
.width30+{
++++width:+30%25+!important;
}
.width20+{
++++width:+20%25+!important;
}
.width10+{
++++width:+10%25+!important;
}|code-block|syntax|javascript|179321|<div+class="line+width100"+/>|179322|179323|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.line {
    height: 2px;
    background-color: var(--itemBorder);
    color: var(--itemBorder);
}
.width100 {
    width: 100% !important;
}
.width90 {
    width: 90% !important;
}
.width80 {
    width: 80% !important;
}
.width70 {
    width: 70% !important;
}
.width60 {
    width: 60% !important;
}
.width50 {
    width: 50% !important;
}
.width40 {
    width: 40% !important;
}
.width30 {
    width: 30% !important;
}
.width20 {
    width: 20% !important;
}
.width10 {
    width: 10% !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="line width100" /&gt;</code></pre>
</div>
</div>
</p>


<p>Currently, I'm using</p>

<pre><code>&lt;hr align="left" /&gt;
</code></pre>

<p>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</p>

<pre><code>hr{align: left; max-width: 800px;}
</code></pre>

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

<p>So what should I use instead of the inline attribute above?</p>


Align <hr> to the left in an HTML5-compliant way

HTML5

目前，我正在使用<hr align="left" />在我的HTML5页面上，但是我读到过在XHTML4.01中不推荐使用align属性，并且应该从HTML5中删除。我想使用CSS而不是像这样的内联属性，但是当我尝试hr{align: left; max-width: 800px;}或hr{text-align: le...

问以符合html5的方式向左对齐<hr>。
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以符合html5的方式向左对齐<hr>。EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以符合html5的方式向左对齐<hr>。
EN