在square css附近写文字

Question

我创建了像这样的简单方块

#square_gray {
  width: 20px;
  height: 20px;
  background: gray;
}

靠近它我想写点什么，我想得到这样的东西：

所以我试试：

<div class="row">

       <span id="square_gray"> <div class="col-md-6">Production Locations</div></span>
        <div class="col-md-6">Global Service Office</div>
</div>

但它只是不显示方形..我做错了什么？

Answer 1

更改您的HTML，如下所示。还要将样式display: inline-block添加到范围，否则它不会占用空间而不包含文本。

＆＃13;

＆＃13;

 
#square_gray {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: gray;
}

＆＃13;

<div class="row">

   <div class="col-md-6" style="display: flex;">
       <span id="square_gray" style="display: inline-block;"> 
       </span>
       Production Locations
   </div>
   <div class="col-md-6">Global Service Office</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<span>元素是内联元素，而不是块1。这意味着您无法设置width和height属性。

您可以将元素设置为display: inline-block并将其放入div中：

<div class="col-md-6"><span id="square_gray"></span>Production Locations</div>

而不是：

<span id="square_gray"> <div class="col-md-6">Production Locations</div></span>

你也可以：

• 使用unicode黑色方形字符■
• 将黑色方形unicode字符放在<span id="square_grey">■</span><div class="col-md-6">Production Locations</div>
之间
• 更改#square_grey样式以设置字体color: gray;
的颜色