html - 如何高度内联列表？

Question

我正在创建这样的列表菜单:

• Some heading at the top h1
• And the list below, with the items of li

我创建了一个 fiddle作为演示。这是我的代码:

body {
  margin: 0;
  padding: 0;
}

body>ul {
  text-align: center;
  height: 78px;
}

body>ul>li {
  display: inline;
  background: blue;
  height: 80px;
}

body>ul>li>h1 {
  display: block;
  /* width:100%; */
  background: orange;
}

a {
  color: white;
}

<ul>
  <li class="large-list">
    <h1>I WANT 100% WIDTH</h1>
  </li>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
</ul>

问题是我希望列表具有 80px 高度(例如)并且我希望它低于 h1。

我试过 display:inline 而不是 inline-block，但是当它是内联时我不能在 css 中使用 height: 80px。

谁能帮帮我，我错过了什么？

Answer 1

只需将 H1 移出列表，这样更干净。

我已经删除了 li{display: inline(-block);}，并从 ul 中删除了边距/填充以使其与标题左对齐。

body {
  margin:0;padding:0;
}
body > ul {
    text-align:center;
    height:78px;
    background: green;
    margin: 0;
    padding: 0;
  }
  body > ul > li {
    background:blue;

  }
  body > h1 {
    background:orange;
    margin: 0;
  }
  a {
    color:white;
  }

 <h1>I WANT 100% WIDTH</h1>
<ul>
  <li><a href="">TRy</a></li>
  <li><a href="">TRy</a></li>
  <li><a href="">TRy</a></li>
</ul>