jQuery改变HTML元素的样式

Question

我有一个 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 id="pirra">
            <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>  

在 CSS 更改时可以水平显示

div#navigation ul li { 
    display: inline-block;
}

但现在我想用 jQuery 来做，我使用:

$(document).ready(function() {
    console.log('hello');
    $('#navigation ul li').css('display': 'inline-block');
});

但不起作用，我用 jQuery 设置元素样式有什么问题？

谢谢

Answer 1

使用这个:

$('#navigation ul li').css('display', 'inline-block');

此外，正如其他人所说，如果您想一次更改多个 css，那就是您添加花括号(用于对象表示法)的时候，它看起来像这样(如果您想更改，比如说, 'background-color' 和 'position' 以及 'display'):

$('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples.