jQuery改变HTML元素的样式

我有一个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？

谢谢

解决方法

不要使用这个：

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

而是使用：

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

另外，正如其他人所说，如果你想同时进行多个css更改，那就是添加大括号(对象符号)，它会看起来像这样(如果你想改变，说，’背景除了“显示”之外还有“颜色”和“位置”)：

$('#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.