时间戳

首页 > 解决方案 > 如何在与文本大小相关的多个 div 之间设置不同的边框大小？

html - 如何在与文本大小相关的多个 div 之间设置不同的边框大小？

问题描述

大家好，我需要为我的游戏 UI 执行此操作。我需要从这里开始： 现在的情况

对此（它使用paint.net对上一张图片进行编辑）： 期望的结果

<html>
    <body>
        <div id="hud">
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;</div>
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp;</div>
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;LSPD - Cadet de la police trop cool&nbsp;</div>
        </div>
    </body>
</html>

img {
    vertical-align: middle;
}

#hud {
    position: absolute;
    font-family: 'Pricedown';
    font-size: 25px;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    top: 35px;
    right: 5px;
}

帮助感谢感谢。

标签： htmlcss

解决方案

您需要将每个内部包装div在另一个内部并将所有内部包装divs为display: inline-block;

在这里检查

<html>
    <body>
        <div id="hud">
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;</div></div>
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp;</div></div>
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;LSPD - Cadet de la police trop cool&nbsp;</div></div>
        </div>
    </body>
</html>

CSS：

#hud div div {
  display: inline-block;
}

当然，为了更好地组织代码，CSS为 inner 设置类div并为它们创建适当的类CSS。

推荐阅读