Question

HTML：

<ul>
<span class="glyphicon glyphicon-ok"></span> this is the line 1<br>    
<span class="glyphicon glyphicon-ok"></span> this is the line 2<br>
<span class="glyphicon glyphicon-ok"></span>  this is the line 3
</ul>

页面以两个不同的行显示图标和文本。我在Chrome浏览器中进行了检查并为glyphicon类添加了 display：inline ，它在浏览器中运行。但是当我把代码放在css文件中时，它不会覆盖。如何将文字和图标放在同一行？

Answer 1

首先清除您的浏览器缓存，然后为什么不更改

.glyphicon {
  display: block
}

到

.glyphicon {
 display:inline
}

在你的css文件的第386行？

第二种方式，最简单的尝试这个

.glyphicon {
   display:inline !important
 }

Answer 2

这是无效的HTML - 在ul元素中你需要使用li元素（这会使br标签变得多余）。另外，将display课程的.glyphicon更改为inline，因为您说它没有正确覆盖它，请添加!important：

ul {
  list-style: none;
}
.glyphicon {
  display: inline !important;
}

<ul>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 1</li>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 2</li>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 3</li>
</ul>

Answer 3

要覆盖该规则，请考虑向选择器添加更多特异性。

选择器的特异性：

将另一个class选择器添加到选择器范围...

.glyphicon.glyphicon-ok {
   display: block;
}

或元素选择器......

span.glyphicon {
   display: block;
}

上下文选择器也会过度限定单个类选择器声明

ul .glyphicon {
   display: block;
}

所有上述声明都比单个类选择器声明具有更多特异性：

.glyphicon {
   display: block;
}

特异性＆amp;重量：

特异性是应用于给定CSS声明的权重，由匹配中每个选择器类型的数量确定选择。当多个声明具有相同的特异性时，最后一个在CSS中找到的声明应用于元素。特异性仅当多个目标元素被定位时才适用声明。

参考：Specificity - CSS | MDN

级联优先：

如果两个规则具有相同的权重和/或特异性，那么最后宣布的规则将赢得另一个规则。嵌入在html中的CSS总是在外部样式表之后，无论html中的顺序如何。

您正在尝试对自定义规则之后声明的具有相同特异性的样式规则进行高估。

有问题的样式规则在内部声明（在文档中(index:386)），因此在级联顺序中声明 last 和 down down 而不是外部声明的自定义样式规则（在外部样式表中css_injector_3.css）。

style.css ¹ ＆lt; <style></style> ² ＆lt; style="" ³

外部样式 - 通过外部源声明的样式，如a .css源文件

内部样式 - 在style元素标记内声明的样式（包含在html文档中）

内联样式 - 直接向元素声明的样式 style属性值

如果通过以下方式声明它们，则您的规则在浏览器中声明时可能最初有效：

内联 - 使用style属性将css直接应用于元素。

Inspector样式表 - 在任何标准规则之后声明的新规则

如何在与后续文本相同的行中显示glyphicon图标

3 个答案: