一行多个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

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

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

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

一行多个Figure+Figcaption

Several Figure+Figcaption on one line

css

angularjs

html

angular-material