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（用户代理样式表）

使用ng-repeat制作水平列表？不知道我在这里缺少什么

1 个答案: