javascript - 使用 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

替换<div style="text-align: center;">User: {{item.user}}</div>与 <span style="text-align: center;">User: {{item.user}}</span>

或添加 CSS 规则，如:

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

Div 是 display: block默认情况下(用户代理样式表)