javascript - 防止 Element-UI 为 li 标签强制执行列表项

Question

我正在渲染一些这样的列表数据:

<ul>
    <li v-for="el in elements">
        {{el.data}}
    </li>
</ul>

在我的 .css 中:

ul {
   list-style-type: none;
   padding: 0;
}

li {
   display: inline-block;
   margin: 0 10px;
}

当我从 Element-UI 添加一个 Select 组件时，它也会在我的 li 元素上强制执行 list-item 显示属性。我希望我的列表呈现为内联 block 。如何覆盖 li 元素的 Element 样式？

工作演示:http://codepen.io/p-adams/pen/xRYoNw

Answer 1

你应该给你的 ul 一个特定的 id 并在你的 css 中使用那个 id:

ul#list1 {
  list-style-type: none;
  padding: 0;
}

ul#list1 li {
  display: inline-block;
  margin: 0 10px;
}

并在您的 html 中使用:

<ul id="list1">

这是对您的代码笔的更新:
http://codepen.io/anon/pen/zoRgOx