Question

我正在为书店创建一个网站，设计师希望将菜单表示为单独的一堆书。我有4堆不同数量的书（阅读菜单项）。我可以创建包含4个li（桩）的ul的菜单，其中包含带有li（书籍）的ul。我必须坚持使用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>

Answer 1

以聪明的方式使用的{p> 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;
}

垂直对齐sub ul到底部

1 个答案: