我正在创建一个像这样的列表菜单:
- 顶部
h1
的一些标题- 下面的列表以及
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
。
任何人都可以帮助我,我想念什么?
答案 0 :(得分: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>
答案 1 :(得分: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>
答案 2 :(得分: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包含标题。我建议您使用引导程序,而不是对所有内容进行粗略编码。链接:http://getbootstrap.com/