CSS灰色方块旁添加文字失败，方块不显示问题求助

你的页面没显示灰色方块，主要是两个核心问题：HTML结构的合法性错误，以及排版逻辑的问题，咱们一步步拆解：

1. 行内元素不能嵌套块级元素 #

<span>是行内元素，按照HTML规范，它不能包含<div>这种块级元素。浏览器遇到这种非法嵌套时，会自动修正DOM结构——把<div class="col-md-6">Production Locations</div>从<span>里“拎出来”，导致你的#square_gray对应的<span>变成了空元素，自然看不到灰色方块。

2. Bootstrap布局结构错误 #

Bootstrap的row容器的直接子元素应该是col-*类的元素，你把col-md-6嵌套在<span>里，破坏了栅格布局的结构，也会影响元素的渲染。

修正方案 #

我们可以调整结构，用行内块元素实现灰色方块，同时配合Bootstrap的布局，让方块和文字在同一行展示：

第一步：修正CSS（优化方块排版） #

给灰色方块添加行内块属性，让它能和文字在同一行对齐：

#square_gray { 
  width: 20px; 
  height: 20px; 
  background: gray; 
  display: inline-block; /* 让方块与文字同行 */
  vertical-align: middle; /* 让文字与方块垂直居中对齐 */
  margin-right: 8px; /* 方块与文字之间预留间距 */
}

第二步：修正HTML结构 #

把方块元素和目标文字放在同一个col容器内，确保DOM结构合法，同时遵循Bootstrap栅格规则：

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

这样修改后，灰色方块就能正常显示，并且和文字对齐，Bootstrap的栅格布局也能正常工作啦。

内容的提问来源于stack exchange，提问作者Pedro