Html 如何在与文本大小相关的多个div之间具有不同的边框大小？_Html_Css

Html 如何在与文本大小相关的多个div之间具有不同的边框大小？

html css

Html 如何在与文本大小相关的多个div之间具有不同的边框大小？,html,css,Html,Css,大家好，我需要为我的游戏用户界面做这些。我需要从这里开始：对此（使用上一张图片的paint.net进行编辑）： 0 100 500 000000 地方警察局-警察训练营 img{ 垂直对齐：中间对齐； } #抬头显示器{ 位置：绝对位置；字体系列：“价格下调”；字体大小：25px；颜色：#fff；文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；文本对齐：居中；顶部：35px；右：5px； }

大家好，我需要为我的游戏用户界面做这些。我需要从这里开始：

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


0
100 500 000000 
地方警察局-警察训练营

img{
垂直对齐：中间对齐；
}
#抬头显示器{
位置：绝对位置；
字体系列：“价格下调”；
字体大小：25px；
颜色：#fff；
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
文本对齐：居中；
顶部：35px；
右：5px；
}

感谢您的帮助。

您需要将每个内部

div

包装在另一个内部

div中，并使所有内部div
显示为内联块

当然，为了更好地组织代码，可以为内部div
s设置CSS
类，并为它们创建适当的CSS
。
使用flexbox
和左边距：自动并且不要在标签上设置元素的样式，这被认为是一种不好的做法，从长远来看，你只是在让自己变得更难
HTML:
您的内部div
s占家长宽度的100%
。您可以尝试使用display:inline块？从您的图像判断，我认为您指的是宽度，而不是标题（？）中所述的边框大小
<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>

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

<html>
    <body>
        <div id="hud">
            <div>&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;
            </div>
            <div>&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp; 
            </div>
            <div>&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;
  top: 35px;
  right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#hud > div{
  background-color:red;
  border: 2px solid #000; 
  border-radius: 3px; 
  background-color: rgba(200, 200, 200, 0.40);
  margin: 2px 10px;
  margin-left: auto;
}