Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet:
<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>
Attempting to apply the following CSS styles:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
No matter how much tweaking I do, I can't seem to get it to display horizontally. This is how it currently looks when rendered: https://i.sstatic.net/Bhgk5.png
If you spot the silly mistake I've made with the CSS, your help would be greatly appreciated!