设置hr标签的最简单方法是什么？

Question

特别是，我想设置顶部和底部的边距。我尝试了margin: 10px 0;，但它没有起作用。我在谷歌上搜索了一下，但要么是过时的内容，要么是错误的答案。

编辑：代码 html

<div id="new_information_section">
    <div class="tabbable">
        <ul class="nav nav-pills" id="info_nav">
          <li class="active"><a href="#">Admissions</a></li>
          <li><a href="#">The School</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <section id="sat_scores">
                    <div class="chunk">
                        <h3>SAT Scores</h3>
                        <ul>
                            <li>Math: 600-690</li>
                            <li>Reading: 570-690</li>
                            <li>Writing: 560-660</li>
                            <li>Composite: 1130-1320</li>
                            <hr />
                            <li>89% submit</li>
                        </ul>
                    </div>

                    <div class="chunk">
                        <canvas id="sat_math" width="200" height="200"></canvas>
                    </div>
                </section> <!-- SAT Scores -->


            </div>

            <div class="tab-pane" id="tab2">
                <p>Howdy, I'm in Section 2.</p>
            </div>
        </div>
    </div>

</div>

css

#new_information_section {
    #info_nav {
        margin-top: 50px;
    }
    .chunk {
        display: inline;
        float: left;
        clear: none;
        margin-right: 100px;
    }
    h3 {
        font-family: Verdana;
    }
    ul {
        li {
            margin: 10px 0;
        }
        hr {
            width: 50%;
        }
    }
}

- Adam Zerner

---

有什么问题吗？请提供一个例子。 - j08691

它在电子邮件模板中吗？ - Ani

简单的解决方案：将新的CSS规则应用于您的列表，而不是在<ul>内部添加<hr>。这是无效的HTML。 - Ani

@Ani，请使用<ul> | <li> | </li> | </ul>增加数据空间，而不是简单地使用<hr>标签。 - fiskolin

@FranciscoCarvalho 我不确定你的意思是什么？我建议OP使用CSS而不是使用<hr />。 - Ani

Answer 1

你可以做： HTML

                    <ul>
                        <li>Math: 600-690</li>
                        <li>Reading: 570-690</li>
                        <li>Writing: 560-660</li>
                        <li>Composite: 1130-1320</li>
                        <li><hr class="myhrline"/></li>
                        <li>89% submit</li>
                    </ul>

CSS

  hr.myhrline{
     margin: 10px;
  }

- Ani

---

好的，那行，谢谢！只是为了我理解，你必须给类设置样式而不是hr标签，对吗？为什么有些样式可以应用于hr，而其他样式（如边距）不行呢？ - Adam Zerner

是的，还要将其包含在<li>标记内。问题在于您的HTML无效。由于您在列表中间添加了<hr />，而不是将其添加到<li>标记内。除了<li>之外，您不能在<ul>标记之间添加任何内容。 - Ani

我刚试了一下在<li>标签内部而不添加类的情况下对<hr />进行样式设置，结果成功了。所以我猜问题出在<li>标签上，而不是类名。 - Adam Zerner

是的。问题出在li上。 - Ani

Answer 2

您是否在寻找这个？

HTML

<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<hr class="line">
<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

CSS

hr.line {
    width: 90px;
    color: red;
    margin-top: 30px;
    margin-bottom: 30px
}

- fiskolin

Answer 3

它确实有效，这在JSFiddle中有证据。

请注意hr的样式：

hr {
  margin: 10px 0;
}

正如Ani在评论中提到的，如果这是电子邮件模板，则需要将样式内联直接放在hr元素上，如下所示：

<hr style="margin: 10px 0" />

- Jon Newmuis

---

您可以在HTML编码的电子邮件中包含样式标签。它不需要内联CSS。 - Robbert

style 标签的支持取决于电子邮件客户端。将样式内联会更好地发挥作用。请参见 https://dev59.com/3HVC5IYBdhLWcg3wpS3g - Jon Newmuis