无法在 css 中为导航栏徽标设置最大高度
Not able to set max-height in css for navbar logo
我正在尝试创建带有徽标的导航栏,但无法增加图像的大小。
这是用 kotlin/js 编写的,但本机 html/js 代码的概念应该相同。
Html 索引文件:
fun HTML.index() {
head {
title("Welcome to Seller Service")
link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.css") { }
link(rel = "stylesheet", href = "static/styles/index.css") {}
}
body {
div {
id = "index"
}
script(src = "/static/output.js") {}
script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
}
}
React kotlin/js 代码用索引 ID 替换 div:
override fun RBuilder.render() {
div(classes = "section") {
div(classes = "container") {
nav(classes = "navbar") {
div(classes = "navbar-brand"){
a(classes = "navbar-item"){
img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
}
}
}
}
}
}
}
}
css 从浏览器的控制台看到:
.navbar-item img {
max-height:1.75rem
}
.img-style {
<strike>max-height:4rem;</strike>
}
最大高度:4rem;
我的最大高度没有应用,知道为什么吗?
它总体上受属性顺序控制。我通过覆盖 css 中的相同规则并将其链接到页面来解决这个问题。
.navbar-item > img { max-height: 4rem; }
我覆盖了 navbar-item 的这个规则 class 直接子 img.
我正在尝试创建带有徽标的导航栏,但无法增加图像的大小。
这是用 kotlin/js 编写的,但本机 html/js 代码的概念应该相同。
Html 索引文件:
fun HTML.index() {
head {
title("Welcome to Seller Service")
link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.css") { }
link(rel = "stylesheet", href = "static/styles/index.css") {}
}
body {
div {
id = "index"
}
script(src = "/static/output.js") {}
script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
}
}
React kotlin/js 代码用索引 ID 替换 div:
override fun RBuilder.render() {
div(classes = "section") {
div(classes = "container") {
nav(classes = "navbar") {
div(classes = "navbar-brand"){
a(classes = "navbar-item"){
img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
}
}
}
}
}
}
}
}
css 从浏览器的控制台看到:
.navbar-item img {
max-height:1.75rem
}
.img-style {
<strike>max-height:4rem;</strike>
}
最大高度:4rem;
我的最大高度没有应用,知道为什么吗?
它总体上受属性顺序控制。我通过覆盖 css 中的相同规则并将其链接到页面来解决这个问题。
.navbar-item > img { max-height: 4rem; }
我覆盖了 navbar-item 的这个规则 class 直接子 img.