我正在为一家书店创建一个网站，设计师想要将菜单表示为单独的书堆。我有 4 堆不同数量的书(阅读菜单项)。我可以创建包含 ul 的菜单，其中包含 4 个 li's(堆)，其中包含 ul 和 li's(书)。我必须坚持使用 ul 和 li 符号，因为 Joomla 会像那样创建菜单。
问题是这些书看起来像是飘到天花板上而不是放在书架上。我怎样才能让书平躺在书架上？
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul li {
float: left;
list-style: none;
}
ul li ul {
margin-right: 25px;
}
ul li ul li {
float: none;
margin-top: 5px;
}
hr {
clear: both;
height: 10px;
background: brown;
}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li><a href="#">HOME</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">BOEKENTIPS</a></li>
<li><a href="#">MEER DAN BOEKEN</a></li>
<li><a href="#">NIEUWS</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">LEZERSBLOG</a></li>
<li><a href="#">BESTELFORMULIER</a></li>
<li><a href="#">VERTELTHEATER</a></li>
<li><a href="#">ANTROPOSOFIE</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">CONTACT</a></li>
<li><a href="#">SCHOLEN</a></li>
<li><a href="#">KINDEROPVANG</a></li>
</ul>
</li>
</ul>
<hr id="bookshelf" />
</body>
</html>
最佳答案
display:table 以巧妙的方式使用似乎奏效了。这将需要一些调整，但我相信您可以从这里开始。祝你好运。 http://jsfiddle.net/tmpQM/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul {
display:table;
}
ul li {
display:table-cell;
list-style: none;
vertical-align:bottom;
}
ul li ul {
margin-right: 25px;
display:block;
}
ul li ul li {
float: none;
margin-top: 5px;
display:inline-block;
}
hr {
clear: both;
height: 10px;
background: brown;
}
关于html - 垂直对齐子 ul 到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17457666/