我在 HTML 中有一个导航元素,我可以用外部 CSS 更改它,但我想比较如何从 HTML 内部调用它,
所以我得到了
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
如果我放在标题上
<link href="css/custom.css" rel="stylesheet" type="text/css" />
我可以更改我的列表以在 CSS 上显示为导航
#navigation ul li {
display: inline-block;
}
但现在我想比较,并从 HTML 内部调用这个元素
我在头部使用,并注释CSS
<style>
#ul.navigation{display:inline-block;}
</style>
但我认为我没有正确引用元素
另外,我如何在我的实际 html 正文中为我的列表调用这个“inline-block”属性? [内嵌样式]
我看到 CSS 工作正常,但我想比较在头部调用样式以及如何在主体中调用它,
这3个案例我都看过了,
http://www.w3schools.com/css/css_howto.asp
我看到它与段落一起工作,但需要更多说明才能知道如何与我的元素一起工作?
谢谢
最佳答案
你试过这样写吗:
<style>
#navigation ul li {
display: inline-block;
}
</style>
使用 #ul.navigation{display:inline-block;}
你选择了错误的元素。
ul.navigation
-> 您的 ul
元素带有 classnavigation
。
#
代表ID。所以 #ul.navigation
无效。
您的意思可能是 div#navigation
或更好的 div#navigation ul li
来选择 ul< 的
元素是 li
元素div
的子元素,ID 为“navigation”。
像这样:
<style>
div#navigation ul li {
display: inline-block;
}
</style>
JSFiddle .
关于标题比较中的html调用元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16084477/