标题比较中的html调用元素

Question

我在 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

我看到它与段落一起工作，但需要更多说明才能知道如何与我的元素一起工作？

谢谢

Answer 1

你试过这样写吗:

<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 .