Question

当我尝试构建我的网页时，菜单链接底部和我的主导航区域之间有一个非常小的空间（大约2px）。我只使用颜色来看看布局是如何工作的，但有人可以告诉我为什么会有区别吗？当然它们应该是同一个高度？可在此处查看当前状态https://jsfiddle.net/vd22ebge/

＆＃13;

html,
body,
div,
header,
h1,
h2,
h3,
h4,
h5,
h6,
nav,
ul,
li,
a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: Rubik;
  color: #303030;
  vertical-align: baseline;
  list-style: none;
  text-align: center;
}

body {
  line-height: 1;
  width: 100%;
  margin: 0 auto;
}

#page-header {
  font-variant: small-caps;
  background: #b0e0e6;
}

#page-header h1 {
  font-size: 2em;
  padding: 1em 0;
  font-weight: bold;
}

#page-header h2 {
  font-size: 1.6em;
  padding-bottom: 1em;
  font-weight: bold;
}

#page-menu {
  background: red;
}

#page-menu ul {
  display: inline-block;
}

#page-menu ul li {
  display: inline;
}

#page-menu li a {
  display: block;
  float: left;
  padding: 1em;
  text-decoration: none;
}

#page-menu li a:link,
#page-menu li a:visited {
  background: #303030;
  color: #b0e0e6;
}

#page-menu li a:hover {
  background: #030303;
  color: #b0e5e6;
}

＆＃13;

<div id="page-wrapper">

  <header id="page-header">
    <h1>Main Title</h1>
    <h2>Subtitle</h2>
  </header>

  <nav id="page-menu">
    <ul>
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>
      <li><a href="#">Link Four</a></li>
    </ul>
  </nav>
  <!-- #page-menu -->

</div>
<!-- #page-wrapper -->

＆＃13;

Answer 1

可以在http://christopheraue.net/2014/03/05/vertical-align/#there-might-be-a-little-gap-below-inline-level-elements

找到一个很好的解释

基本上问题是你使用vertical-align:top会在它下面留下一点空间

在基线之下是一些空间来庇护文本的下降。

使用var result = []; "0E-11 GERBER CA 960350E-110.0215.500000000 0E-12 TEHAMA CA 960900E-11214.800000000".split(" ").forEach(function(element, index, array) { if( (index + 1) % 4 === 0) { result.push([ array[index-3], array[index-2], array[index-1], array[index] ]); } }); console.log(result);进行修复。

在https://jsfiddle.net/vd22ebge/6/

更新了小提琴

导航和导航ul给出不同的高度

1 个答案: