未知点呈现到页面中 - 是什么原因造成的？

Question

我有一个演示 application 这里 "tweets" 的左上角有一些点，我不知道它们来自哪里。代码是用Ember写的，模板是这样的

 <h2>Ember.js DEMO Tweet list</h2>

        <div class="tweets-list">
        <h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
        {{#each this.model.topTweets as |model|}}
            <li class="media">
<div {{action 'bindNewModel' this}} class="row">
  <a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
  <div class="media-body">
  <h4 class="media-heading">{{model.favorites}}</h4>
  <p>{{model.text}}</p>
        </div>
</div>
<div class="row">
<div class="col-xs-4">
<a href="#">Expand</a>
        </div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
        </ul>
        </div>
        </div>

</li>
{{/each}}

                </div>

P.S。必须按下显示列表按钮才能显示列表

Answer 1

这些是列表项标记。添加列表样式：none；到 ul，它们就会消失。编辑：我看到你也错过了 ul 本身。包装 ul 不存在。这些只是列表项。在每个语句之前添加开头的 ul 并在它之后关闭。并以防列表样式 none 规则。我在移动设备上，无法编辑 fiddle.

Answer 2

这是因为您使用的是列表项，即 <li> 标签。默认情况下，它们以项目符号显示。

首先，您应该只在有序或无序列表 (<ol> / <ul>) 中使用 <li> 标签。您应该考虑列表项是否适合此处。也许 <div> 更合适？
如果你想使用列表项，你应该将它们包装在 <ul> 列表中，然后通过应用样式来删除项目符号点：list-style-type: none.
更改列表项的 display 样式也会去掉项目符号点。

Answer 3

存在 HTML 结构错误。用 <ul> 标签包裹 <li class="media">。我可以假设您正在使用 Bootstrap。如果是，则用 <ul class="list-group"> 包装 <li> 标签并将 list-group-item class 添加到 <li> 标签，如下所示： <li class="media list-group-item">

未知点呈现到页面中 - 是什么原因造成的？

Unknown dots rendered into page - what causes them?

javascript

ember.js