Html 如何提高内联列表的高度？_Html_Css_Css Position

Html 如何提高内联列表的高度？

html css

Html 如何提高内联列表的高度？,html,css,css-position,Html,Css,Css Position,我正在创建如下列表菜单：顶部的一些标题h1 以及下面的列表，其中包含li 我已经创建了一个演示。这是我的密码：正文{ 保证金：0；填充：0； } 车身>ul{ 文本对齐：居中；高度：78px； } body>ul>li{ 显示：内联；背景：蓝色；高度：80px； } 主体>ul>li>h1{ 显示：块； /*宽度：100%*/ 背景：橙色； } a{ 颜色：白色； } 我想要100%的宽度只需将H1从列表中移出，这会更干净我删除了li{display:inlin

我正在创建如下列表菜单：

顶部的一些标题
```
h1
```
以及下面的列表，其中包含
```
li
```

我已经创建了一个演示。这是我的密码：

正文{
保证金：0；
填充：0；
}
车身>ul{
文本对齐：居中；
高度：78px；
}
body>ul>li{
显示：内联；
背景：蓝色；
高度：80px；
}
主体>ul>li>h1{
显示：块；
/*宽度：100%*/
背景：橙色；
}
a{
颜色：白色；
}



我想要100%的宽度

只需将H1从列表中移出，这会更干净

我删除了

li{display:inline（-block）；}

，并删除了ul的边距/填充，使其与页眉左对齐

正文{
边距：0；填充：0；
}
车身>ul{
文本对齐：居中；
高度：78px；
背景：绿色；
保证金：0；
填充：0；
}
body>ul>li{
背景：蓝色；
}
车身>h1{
背景：橙色；
保证金：0；
}
a{
颜色：白色；
}

我想要100%的宽度

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

<!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>


身体{
边距：0；填充：0；
}
车身>ul{
文本对齐：居中；
填充：78px；
}
body>ul>li{
显示：内联；
背景：蓝色；
高度：80px；
}
主体>ul>li>h1{
显示：块；/*宽度：100%*/
背景：橙色；
}
a{
颜色：白色；
}
.标题{
文本对齐：居中；
背景色：#ddd；
}
我想要100%的宽度

并使用一个单独的div来包含标题。我建议您使用引导，而不是粗糙的编码一切。链接：

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

h1

移出列表

正文{
保证金：0；
填充：0；
}
车身>h1{
文本对齐：居中；
背景：红色；
}
车身>ul{
文本对齐：居中；
宽度：100%；
高度：78px；
}
body>ul>li{
显示：内联块；
背景：蓝色；
高度：80px；
}
主体>ul>li>h1{
显示：块；
/*宽度：100%*/
背景：橙色；
}
a{
颜色：白色；
}

我想要100%的宽度