带有内联文本的 CSS 圆圈

Question

我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时，圆圈是内联的，但我无法添加任何文本。当我使用 circle class 到 div 时，我可以添加文本，但它们不显示内联，即使我将 display:inline 添加到 circle class。

CSS

        img.galeria{
        border-style: solid;
        border-width: 3px;
        border-color: yellow;
        width: 12%;
        height: 75.825%;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        box-shadow: 0 0 8px rgba(0,0,0, .8);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
        margin-right: 2%;
    }

第一个选项的 HTML (img)

<a href="abecadlo/"><img class="galeria" src="../images/backgrounds/light-blue.png"/></a>

第二个选项 (div) 的 HTML

<a href="abecadlo/"><div class="galeria"/>text</a>

我做错了什么？

Answer 1

在你的风格中，替换 display: inline;显示:内联 block ；。它对我有用!