css - 元素不会显示 inline-block

Question

我正在尝试并排放置我的站点 Logo 和水平导航元素，有点像这样:http://colorgrade.it/

由于某些原因，它仍然显示 block ，并且查看 Chrome 的 javascript 控制台显示导航元素具有属性 display:block，这似乎可以解释问题。

但是，我无法在我的 CSS 中找到导致此问题的位置。有助于此属性的元素是 ul、menu 和 dir

在文件中搜索 block 返回

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
article, aside, details, figcaption, figure, 
footer, header, hgroup, section {
  display: block;
}

我还尝试将内联 block 添加到导航元素本身:

<%= render :partial => 'layouts/navigation' , :style=>"display:inline-block;"%>

导航元素看起来像:

<ul id="navigation">
  <li>several li elements</li>
</ul>

有人可以解释为什么这两个元素没有并排对齐吗？谢谢!

Answer 1

您不能将参数 style 传递给 render，您需要在导航部分应用样式选项(寻找类似 navigation.html 的内容。 erb)

但是，我建议不要在您的 html 中使用样式属性，除非您确实必须这样做。在您的情况下，在您的样式表中使用 css(如果您使用 sass 则查找 application.sass 或 application.css 就可以了。

如果您需要进一步的建议，请发布您的导航的 html 代码和您的 css 代码。