如何高度内联列表？

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 中删除了 margin/padding，使其与 header 左对齐。

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>

Answer 2

使用填充而不是试图增加它的高度。使用下面的例子。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
  body {
    margin:0;padding:0;
  }
  body > ul {
    text-align:center;
    padding:78px;
  }
  body > ul > li {
    display:inline;
    background:blue;
    height:80px;
  }
  body > ul > li > h1 {
    display:block; /* width:100%; */
    background:orange;
  }
  a {
    color:white;
  }
  .header{
    text-align: center;
    background-color: #ddd;
  }
</style>

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

</body>
</html>

并使用单独的 div 来包含您的 header。我建议您使用 bootstrap 而不是对所有内容进行粗略编码。 Link: http://getbootstrap.com/

Answer 3

最简单的方法是尽可能少地更改代码，如下所示。将 h1 移出列表。

body {
  margin: 0;
  padding: 0;
}

body>h1 {
  text-align: center;
  background: red;
}

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

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

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

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>

如何高度内联列表？

How to height an inline list?

html

css

css-position