2017-06-04 7 views
0

ここにはデモapplicationがあり、「つぶやき」の左上隅には点があり、どこから来たのかわかりません。コードは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.リストを表示するにはSHOW LISTボタンを押す必要があります

+0

あなたは、この残ったクロージングコメントを'意味しますか? –

答えて

1

リスト項目を使用しているのは、<li>タグです。デフォルトでは箇条書きで表示されます。

まず、<li>タグを順序付きリストまたは順序付けされていないリスト(<ol>/<ul>)にのみ使用してください。ここでリスト項目が適切かどうかを検討する必要があります。たぶん<div>がより適していますか?
リストアイテムを使用する場合は、<ul>リストにラップしてから、スタイリング:list-style-type: noneを適用して箇条書きを削除する必要があります。
リストアイテムのdisplayスタイルを変更すると、箇条書きも削除されます。

1

これはリストアイテムのマーカーです。リストスタイルを追加:なし; ulに、彼らは消えてしまいます。 編集:あなたはulそのものも見逃していることがわかります。ラップulは存在しません。これらは単なるリスト項目です。それぞれの文の前にulを追加し、その後に閉じる。リストスタイルの場合はルールなし。 私はモバイルで、フィドルを編集することはできません。

0

HTML構造エラーがあります。 <li class="media"><ul>タグで囲みます。私はあなたがブートストラップを使用していると仮定できます。はい、その後<ul class="list-group"><li>タグをラップし、このような<li>タグにlist-group-itemクラスを追加する場合: - > `<li class="media list-group-item">

関連する問題