CSS/Jade/HTML：框无法正确内联

Question

我有以下 Jade 模板：

extends layout

block content
  h2 Characters and Portraits
  div(id="portraitsBox")
    - var portraits  = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
    for filename in portraits
        - var url = "/images/portraits/" + filename.toLowerCase() + ".png"
        div(class="characterBox" id=filename)
          h3(class="characterName")= filename
          img(class="portrait" src= url)
  link(rel='stylesheet', href='/stylesheets/characters.css')

从以下内容中提取 CSS:

#portraitsBox {
  border: 1px solid black;
  padding: 10px;
}

.characterBox {
  position: relative;
  padding: 5px;
  border: 1px solid black;
  width: 350px;
  display: inline;
}

.characterName {
  padding-top: 0px;
  width: 150px;
  font: Arial;
  text-align: center;
}

如果我取出 display: inline，效果很好，但每次我尝试将其放回原位时，我都会得到这些垃圾：

http://www.orderofthemouse.co.uk/characters

并且容器 div 将自身调整为 169.9px 宽！！？

这是怎么回事？我检查了 Firebug，看起来没有任何 Bootstrap 默认样式覆盖我自己的 CSS（它们在扩展布局文件中被调用）或类似的东西那个，据我估计，级联中没有任何东西应该引起它。当我查看生成的 HTML 时，所有元素都按预期嵌套，这是我的下一个考虑因素，所以我似乎没有忽略任何愚蠢的事情...?

Answer 1

你想得到这个结果吗：http://screencast.com/t/c06yM3cr

我很困惑，因为你说如果禁用内联显示就可以正常工作，而当我尝试时它们仍然显示为块。

如果你想要的结果是我在截图中得到的结果，你所要做的就是将包装器#portraitsBox设置为显示：flex。

CSS/Jade/HTML：框无法正确内联

CSS/Jade/HTML: boxes won't inline properly

css

node.js

templates

pug

cascade