我的内联块div以奇怪的锯齿形图案

Question

我正在尝试在HTML中可视化简单命令及其参数。期望的输出：

实际输出：

我使用的代码：

html {
  background-color: #222;
}

div.script {
  display: table-cell;
  vertical-align: top;
}

div.script div.script-command {
  display: inline-block;
  max-width: 10em;
  min-width:3em;
  
  border: 1px solid #66E239;
  background-color: rgba(102,226,57, 0.3);
  border-radius: 0.5 em; 
}
div.script-command p.name {
  text-align: center;
  font-size: 15pt;
}
div.script-command div.arguments {
  padding: 0.5 em;
  text-align: center;
}
div.script-command div.arguments .argument {
  font-family: "Courier new", consolas;
  color: black;
  font-size:11pt;
  background-color: #CCC;
  border: 1px solid white;
  padding: 3pt;
  margin: 2pt;
  display: inline-block;
}

<div class="script">
  <div class="script-command">
    <p class="name">s
    </p>
    <hr>
    <div class="arguments">
      <span class="argument">xxx
      </span>
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">aaa
    </p>
    <hr>
    <div class="arguments">
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">s
    </p>
    <hr>
    <div class="arguments">
      <span class="argument">gfdgf
      </span>
      <span class="argument">1000
      </span>
      <span class="argument">5
      </span>
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">dd\;
    </p>
    <hr>
    <div class="arguments">
    </div>
  </div>
</div>

当.arguments div为空时，会发生错误的对齐。为什么会这样？我该如何解决？

Answer 1

在内联块元素上使用vertical-align: top;。

Answer 2

结帐此修补程序

div.script div.script-command {
  display: inline-block;
  max-width: 10em;
  min-width:3em;
  vertical-align:top;

  border: 1px solid #66E239;
  background-color: rgba(102,226,57, 0.3);
  border-radius: 0.5 em; 
}

http://jsfiddle.net/jrpq1xe7/

Answer 3

您需要设置内联块元素的vertical-align。

如果你想看一眼spec，

  

此简写属性指定内联级框如何在行内对齐。值与其长手属性相同，见下文。

由于您将基线设置为默认/未特别设置，因此它将设置为最低行，因此将其设置为top会将inline-block元素与顶部对齐线

＆＃13;

＆＃13;

html {
  background-color: #222; 
}

div.script {
  display: table-cell;
  vertical-align: top;
}

div.script div.script-command {
  display: inline-block;
  max-width: 10em;
  min-width:3em;
   vertical-align: top;
  border: 1px solid #66E239;
  background-color: rgba(102,226,57, 0.3);
  border-radius: 0.5 em; 
}
div.script-command p.name {
  text-align: center;
  font-size: 15pt;
}
div.script-command div.arguments {
  padding: 0.5 em;
  text-align: center; 
}
div.script-command div.arguments .argument {
  font-family: "Courier new", consolas;
  color: black;
  font-size:11pt;
  background-color: #CCC;
  border: 1px solid white;
  padding: 3pt;
  margin: 2pt;
  display: inline-block;
}

＆＃13;

<div class="script">
  <div class="script-command">
    <p class="name">s
    </p>
    <hr>
    <div class="arguments">
      <span class="argument">xxx
      </span>
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">aaa
    </p>
    <hr>
    <div class="arguments">
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">s
    </p>
    <hr>
    <div class="arguments">
      <span class="argument">gfdgf
      </span>
      <span class="argument">1000
      </span>
      <span class="argument">5
      </span>
    </div>
  </div>
  
  <div class="script-command">
    <p class="name">dd\;
    </p>
    <hr>
    <div class="arguments">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;