如何强制文本包含在内联块div中？

Question

我正在尝试在Ionic中创建一个水平滚动列表。 我不明白为什么，但是以下解决方案仅在white-space: nowrap;处安排子项目 我相信，由于下面的文字，列表中的图像不是包装。 如何正确设置并将文字宽度设置为等于图像宽度？

CSS代码：

.wide-as-needed {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; 
}

HTML code：

<ion-scroll direction="x" class="wide-as-needed" has-bouncing="true">
              <div ng-repeat="book in books" style="margin:10px;display: inline-block;"> 
           <img ng-src="{{book.cover || './img/noCover.png'}}" err-src="./img/noCover.png" alt="{{book.title}}"/>
                <div style="max-width: 10em;">
                  <ul>
                   <li>{{book.title}}</li>
                    <li> {{book.author}}</li>
                  </ul>              
                </div>    
            </div>
</ion-scroll>

Answer 1

你可以这样做

<div class="wrapper">
  <img src="http://lorempixel.com/output/food-q-c-250-250-3.jpg" alt="" />
  <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, debitis!</div>
</div>

{{1}}