logo标签列表

如何增加内联列表的高度？

htmlcsscss-position
3
我正在创建一个像这样的列表菜单：
  • 顶部的某个标题 h1
  • 下面是列表，其中包含li项
我已经创建了一个演示。以下是我的代码： 

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。
请问有谁能帮帮我，我错过了什么吗？
3个回答
1

只需将H1从列表中移出，这样更清洁。

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

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>

1

最简单的方法是尽可能少地更改您的代码，可以像下面这样移动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>

0

使用填充代替尝试增加其高度。请参考以下示例。

<!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来包含您的标题。我建议您使用Bootstrap而不是粗略编码所有内容。链接：http://getbootstrap.com/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接