css - 一行多个Figure+Figcaption

Question

在一个对话框中，我想在同一行显示几个带有标题的下载链接:

<md-dialog-content>
        <div align="center" id="download">

            <a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
               download>
                <figure>
                <img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
                    <figcaption>English PDF</figcaption>
                </figure>
            </a>
            <a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
               download>
                <figure>
                    <img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
                    <figcaption>French PDF</figcaption>
                </figure>
            </a> 
            <a ng-href="https://community.site.com/it/urbsi/cartographies/{{currentCartography}}.vsd"
               download>
                <img src="style/images/vsd-icon.png" alt="Download VSD" width="15%" height="15%">
            </a>   
            <a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
               download>
                <figure>
                <img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
                <figcaption>English PNG</figcaption>
                </figure>
            </a>
            <a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
               download>
                <figure>
                    <img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
                    <figcaption>French PNG</figcaption>
                </figure>
            </a>
        </div>
    </md-dialog-content>

但是我的链接显示在不同的行上。我尝试了 display: inline; 但没有成功。

它给出了这个而不是单行对话框:

Answer 1

使用layout="row"在你的 div 标签内。

<md-dialog-content>
    <div align="center" id="download" layout="row">
        // your anchor tag
    </div>
</md-dialog-content>

注意:当您使用 <md-dialog-content> 时这意味着您正在使用 angular-material-design