Question

我的vue项目中有这个选择元素

<div class="resultContainer">
   <section>
      <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option>
    </section>
  </div>

v-for="exchange in finalExchanges"来自vue，与我的问题无关
我的CSS代码是

hr {
 border: 0;
 height: 1px;
 width: 75%;
 background: #e8edf4;
}

.resultContainer {
   margin: auto;
   width: 60%;
   height: 80vh;
   overflow: scroll;
 }

.resultBtn {
   background-color: #59c3c3;
   border: none;
   width: 100%;
   padding: 10px 0px 10px 0px;
   text-transform: capitalize;
   font-size: 1.25rem;
}

问题是<hr>标签没有出现，我注意到如果我使用<ul>和<li>和<hr>，该如何解决？

Answer 1

hr不是option的有效子代

4.10.10. The option element

内容模型：


如果元素具有label属性和value属性：无。

如果元素具有label属性，但没有value属性：文本。

如果元素没有label属性：并且不是datalist元素的子元素：不是元素间空格的文本。

如果元素没有label属性，并且是datalist元素的子元素：文本。

因此内容只能是Text或Nothing

如果您希望对元素进行分组，则可以使用optgroup；或者，如果要使用分隔符，可以使用此-hackish-解决方案：

<option disabled>──────────</option>

Answer 2

<option>标记是<select>标记的子标记。在浏览器<select>中，它具有自己的样式。

简而言之，您不能在<hr>中使用<option>

Answer 3

如果您希望在选项之间添加一条水平线，则可以像这样从Bootstrap中使用除法器类

 <ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li class='divider'></li>
  <li><a href="#">JavaScript</a></li>
</ul>

<hr />不显示在<option>内部

3 个答案: