html - 将水平规则附加到每个

Question

对于我的<ul>列表，我想<hr>在列表的每个元素之后添加一个。结果应呈现如下：

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

<hr>添加到每个都是不好的风格，<li>所以我想只使用 css 来折射它。我不能使用：

.mylist > li: after{
    content: "<hr>"
}

因为内容会转义字符。

我也不想使用 jQuery：

$('.mylist').find('li').append('<hr width="40%">');

所以问题是，我如何使用css3<hr width="40%">附加到每个 <li>特定列表？

Answer 1

jQuery 解决方案

刚刚意识到你想在关闭它之前将hr元素嵌套在里面li，是的，它是完全有效的，所以只需使用append()，并注意，你不能只使用 CSS 来做到这一点，因为你不能使用 CSS 修改 DOM，你需要使用 jQuery 或JS

jQuery("ul li").append("<hr />");

演示

---

CSS 解决方案

如果您不需要额外的元素，或者您不想要 jQuery 解决方案（如您所愿）

使用hr元素作为元素的直接子ul元素不是有效的标记，相反，您可以使用 a border-bottomfor eachli其行为与 dos 相同hr，但如果您想要一种明确的方式来这样做，例如控制width分隔符而不更改width比li你能做到的

演示

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

在这里，我只是创建了一个虚拟block级别元素，它实际上并不存在于 DOM 中，但它只会做你需要的事情。你可以只设计元素，就像你设计一个普通的div. 您也可以border在此使用，但要保持细线水平居中，我已分配height: 1px;而不是使用margin空间。

Answer 2

我认为最好为此使用CSS。例如，您可以停止使用<hr>标签，而是执行以下操作：

<ul class="mylist">
    <li>
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

然后使用 CSS：

.mylist li { border-bottom: 1px solid black; }

还有其他选项，例如，如果您只想为某些列表项显示水平线，您可以给它们一个类并仅为该类添加一个 CSS 规则。像这样：

<ul class="mylist">
    <li class="hr">
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

和 CSS：

.mylist li.hr { border-bottom: 1px solid black; }

Answer 3

你可以这样使用：

<ul>
   <li></li>
</ul>
<hr/>

那很简单。如果你有嵌套ul然后li你使用li而不是<hr/>或只是<hr/>在<li></li>标签内。见下文。它纯粹是你的选择。

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li style="height:1px;border:solid 1px #666"> </li> // or you can also use 
  <li><hr/></li>
  <li> 
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

Answer 4

内容中的标签是不允许的，即使它会非常具有误导性（css { content: "text"}, How do i add tags?）

如果您认为添加<hr>HTML 是错误的，而不是添加 css（如果可能的话）或 js 是错误的。<li恕我直言，如果结果不符合预期，您应该尝试使用 > 的边框添加<hr>

Answer 5

插入为每个Class创建一个 Abottom-border:<li>

<!--########## STYLE EACH li USING CLASS ##########-->
<style>
  .hr {
     width:40%;
     border-bottom:1px solid rgba(0,0,0,.7);
   }

</style>

<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
    -CONTENT-

</li>
<li class="hr">
    -CONTENT-
</li>
...

Answer 6

试试这个 CSS：

li:after {
  content: " ";
  display: block;
  height: 2px;
  width: 100%;
}