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

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 浏览器中进行了检查，并将 display:inline 用于 glyphicon class，它在浏览器中有效。但是当我将代码放入 css 文件时，它不会覆盖。如何将文本和图标放在同一行？

Answer 1

先清除你的浏览器缓存然后你为什么不改变

.glyphicon {
  display: block
}

到

.glyphicon {
 display:inline
}

在您的 css 文件的第 386 行？

第二种方法也是最简单的方法

.glyphicon {
   display:inline !important
 }

Answer 2

这是无效的 HTML - 在 ul 元素内部您需要使用 li 元素（这使得 br 标签变得多余）。加上把.glyphiconclass的display改成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;
}

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

ul .glyphicon {
   display: block;
}

所有上述声明比单个 class 选择器声明更具体，例如：

.glyphicon {
   display: block;
}

特异性和权重：

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations.

参考：Specificity - CSS | MDN

级联优先级：

如果两个规则具有相同的权重 and/or 特异性，则最后声明的规则获胜并且将 overqualify 另一个。 CSS 嵌入 html 总是在外部样式表之后，不管 html.

中的顺序如何

您正试图过分限定在自定义规则之后声明的具有相同特异性的样式规则。

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

style.css ¹ < <style></style> ² < style="" ³

外部样式 - 通过外部源声明的样式，例如 .css 源文件
内部样式 - 在 style 元素标签中声明的样式（包含在 html 文档中）
内联样式 - 通过直接向元素声明的样式 style 属性值

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

Inline - css 使用 style 属性直接应用于元素。
检查器样式表 - 在任何标准规则之后声明的新规则

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

How to display glyphicon icon in the same line as subsequent text

css

glyphicons