ng-repeatを使用して水平リストを作成しますか？私がここで逃しているものがわからない

Question

かなりシンプルな質問ですが、私はこのコードをあまりにも長く見ていて、私はコードブラインドになってしまい、ここで間違っているのを見ることができません。

私はAngularのng-repeatを使ってモーダル内に2つの画像サムネイルの水平リストを作成しようとしています。ここではHTMLはそれのためである：

<div class="modal-body"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <form name="socreForm"> 
       <div ng-hide="hasScreenshot === true"></div> 
       <h3>Screenshots</h3> 
        <ul class = "imgList"> 
         <li ng-repeat="item in screenshots"> 
          <div style="text-align: center;">User: {{item.user}}</div> 
          <img class="thumbnail" ng-src = "{{item.imageURL}}"> 
         </li> 
        </ul> 
       <h3>Outcome</h3> 
       <div> 
        <input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'"> 
        <label>Win</label> 
       </div> 
       <div> 
        <input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'"> 
        <label>Lose</label> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

そして、ここでは、私が使用しようとしているCSSです：

.imgList { 
    li { 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
    } 
} 

.thumbnail { 
    width: 40% 
} 

私は今しばらくの間、このいじるしてきたと私は単にそれをすることはできません横に表示されます。

愚かなCSSのものは何ですか？助けをよろしくお願いします。

Answer 1

よう<span style="text-align: center;">User: {{item.user}}</span>

で<div style="text-align: center;">User: {{item.user}}</div>を交換するか、CSSルールを追加します。

.imgList div { 
    display: inline; //or inline-block 
} 

のdivは、あなたがより少ない/ SASSを使用しているデフォルト（ユーザーエージェントスタイルシート）