我创建了一组颜色框，但是当它们中的一些有内部跨度而另一些没有时，它们的对齐方式就会被破坏。 注意:内跨包含字体为0/0A的文本； 财产。 因此，我很难理解为什么会发生这种情况。
代码可以在这里找到:
null
.cf_filters_list {
padding-inline-start: 0;
margin-inline-start: 0;
}
.cf_colorbtn_list li {
display: inline-block;
padding: 0px !important;
position: relative;
}
cf_filters_list li .cf_option {
text-decoration: none;
padding: 1px 5px;
}
.cf_color_btn {
display: inline-block;
width: 2em;
box-sizing: border-box;
padding: 0px !important;
border: 1px solid #999;
margin: 2px 4px 4px 2px !important;
}
.cf_hidden_text {
font: 0/0 a;
color: transparent !important;
}
.cf_color_inner {
height: 1.8em;
display: inline-block;
float: left;
margin: 0px !important;
padding: 0px !important;
}<ul class="cf_filters_list cf_colorbtn_list">
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlA" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Color A</span>
<span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li" >
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlB" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlC" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Color C</span>
<span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
</ul>null
检查缺少text的第2个框或将该span添加到第2个框时，其他框会发生什么情况。
在.cf_colorbtn_list li上添加vertical-align:top；
null
.cf_filters_list {
padding-inline-start: 0;
margin-inline-start: 0;
}
.cf_colorbtn_list li {
display: inline-block;
padding: 0px !important;
position: relative;
vertical-align: top;
}
cf_filters_list li .cf_option {
text-decoration: none;
padding: 1px 5px;
}
.cf_color_btn {
display: inline-block;
width: 2em;
box-sizing: border-box;
padding: 0px !important;
border: 1px solid #999;
margin: 2px 4px 4px 2px !important;
}
.cf_hidden_text {
font: 0/0 a;
color: transparent !important;
}
.cf_color_inner {
height: 1.8em;
display: inline-block;
float: left;
margin: 0px !important;
padding: 0px !important;
}<ul class="cf_filters_list cf_colorbtn_list">
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlA" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Color A</span>
<span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li" >
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlB" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlC" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Multi-Red</span>
<span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
</ul>
在您的CF_Filters_List上使用display:Flex-Flex框很容易使用，并且可以修改。
在这里阅读更多关于它的信息flex here:
此处提供MDN flex信息
null
.cf_filters_list {
padding-inline-start: 0;
margin-inline-start: 0;
display: flex;
}
.cf_colorbtn_list li {
display: inline-block;
padding: 0px !important;
position: relative;
}
cf_filters_list li .cf_option {
text-decoration: none;
padding: 1px 5px;
}
.cf_color_btn {
display: inline-block;
width: 2em;
box-sizing: border-box;
padding: 0px !important;
border: 1px solid #999;
margin: 2px 4px 4px 2px !important;
}
.cf_hidden_text {
font: 0/0 a;
color: transparent !important;
}
.cf_color_inner {
height: 1.8em;
display: inline-block;
float: left;
margin: 0px !important;
padding: 0px !important;
}<ul class="cf_filters_list cf_colorbtn_list">
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlA" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Color A</span>
<span class="cf_color_inner" style="background-color:#9e9e9e; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlB" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_color_inner" style="background-color:#59ff6a; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
<li class="cf_filters_list_li">
<div class="cf_link" role="button" aria-pressed="false">
<a href="someurlC" class="cf_option cf_color_btn " data-module-id="110" rel="nofollow">
<span class="cf_hidden_text">Color C</span>
<span class="cf_color_inner" style="background-color:#ffcc33; width:100%" aria-hidden="true"></span>
</a>
</div>
</li>
</ul>