使内联图像和用户名位于其下一级

Question

<div class="players">
    {{#each users}}
        {{#each usersInLobby}}
        <img src="/img/chars/{{skin}}.png" style="height: 85px">
            <p>{{username}}{{level}}</p>
        {{/each}}
    {{/each}}
</div>

这是我目前的代码。但其显示如下：

我想在图像下方添加用户名，并且图像以内联方式显示。

Answer 1

有几种方法可以实现您想要的。这是两个示例：

使用display: inline-block;

.player {
  margin: 10px;
  border: 1px solid red;
  padding: 10px;
  text-align: center;
  display: inline-block;
}

<div class="players">
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
    
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
</div>

使用display: flex;

.players {
  display: flex;
}

.player {
  margin: 10px;
  border: 1px solid red;
  padding: 10px;
  text-align: center;
}

<div class="players">
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
    
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
</div>

两个解决方案都需要您将元素包装在包装div中。

Answer 2

“内联”是指居中吗？试试：

<div class="players">
                {{#each users}}
                    {{#each usersInLobby}}
                    <img src="/img/chars/{{skin}}.png" style="height: 85px; margin-right: 0px; margin-left: 0px;">
                        <p>{{username}}{{level}}</p>
                    {{/each}}
                {{/each}}
            </div>

Answer 3

尝试将img和p包裹在div中，然后在inline-block上应用div：

        <div class="players">
             {{#each users}}
                {{#each usersInLobby}}
                     <div class="users">
                       <img src="/img/chars/{{skin}}.png" style="height: 85px">
                       <p>{{username}}{{level}}</p>
                     </div>
                {{/each}}
            {{/each}}
        </div>

CSS

.users{
    display: inline-block;
    vertical-align: top;
}