javascript - 如何使用只读文本框 Angular 显示垂直图像？

Question

目前我使用下面的 HTML 水平显示图像。现在我想在每个图像的旁边垂直添加一个只读文本框。

<div>
    <span>Uploaded Images</span>
    <div id="appendImages" class="img-section">
        <ul class="img-list" style="float:left">
            <li style="float:left; padding:5px; width:20%;" class="img-list-item" ng-repeat="img in wa.listOfWorkAssignmentDoc track by $index">
                <!--<button type="button" class="ion-close-round"
                        ng-click="removeImage(img)"></button>-->
                <!-- <img ng-src="{{ img.selectedImage }}" />-->
                <img ng-src="{{imgUrl}}{{img.documentId}}" width="100%" />
                <input type="text" />
            </li>

        </ul>

    </div>
</div>

Answer 1

在你的 li 样式属性中使用 display: flex

<div>
  <span>Uploaded Images</span>
  <div id="appendImages" class="img-section">
    <ul class="img-list" style="float:left">
      <li style="display: flex; float:left; padding:5px; width:20%;" class="img-list-item" ng-repeat="img in wa.listOfWorkAssignmentDoc track by $index">
        <!--<button type="button" class="ion-close-round"
                                        ng-click="removeImage(img)"></button>-->
        <!-- <img ng-src="{{ img.selectedImage }}" />-->
        <img ng-src="{{imgUrl}}{{img.documentId}}" width="100%" />
        <input type="text" />
      </li>

    </ul>

  </div>
  </div