CSS嵌套列表宽度和高度 [英] CSS nested lists width and height
问题描述
我想使用嵌套列表获得CSS样式的页脚菜单，因为这似乎是目前大多数CMS的标准方式。然而，我有一个很难得到的宽度和高度动态扩展到正确的大小。
问题1：我想要的总计顶级列表项的宽度为最长子列表项或最高列表项的宽度，取较长者。
问题2：周围DIV的高度不会扩大（尝试使用 overflow：auto 以及 clear：both
我想避免固定高度，因为我想让菜单变得动态。
我需要做什么来解决上述问题？这是我到目前为止：（实例）
< div id =footer>
< div id =footerstrip>
< div id =footercontent>
< div id =footerleft>
< img src =images / LogoGrey.png/>& nbsp;< a href =＃>< img src =images / FooterHome.png/& / a>
< / div>
< div id =footer-menu-div>
< ul id =footer-menu>
< li> Fashion
< ul>
< li>服饰< / li>
< li>名人风格< / li>
< li> Fashion Spotlight< / li>
< li>趋势< / li>
< / ul>
< / li>
< li>美容
< ul>
< li>头发< / li>
< li> Skincare< / li>
< li>化妆& amp;化妆品< / li>
< li>钉子< / li>
< / ul>
< / li>
< / li>
< li>生活方式< / li>
< li>爱< / li>
< li>文化< / li>
< li>订阅< / li>
< li>活动< / li>
< / ul>
< / div>
< / div>
< / div>
CSS：
#footer
{
margin-top：30px;
clear：both;
width：100％;
}
#footerstrip
{
background-color：＃F0F0F0;
width：100％;
margin-top：20px;
overflow：auto;
}
#footercontent
{
padding：10px 0px 10px 0px;
width：1100px;
text-align：left;
color：＃666666;
font-size：10px;
font-family：Arial，Helvetica，sans-serif;
text-transform：uppercase;
vertical-align：middle;
margin：auto;
overflow：auto;
background-color：＃e0e0df;
}
#footercontent a
{
color：＃666666;
font-size：10px;
font-family：Arial，Helvetica，sans-serif;
text-transform：uppercase;
text-decoration：none;
overflow：auto;
}
#footercontent img
{
vertical-align：middle;
margin-left：5px;
}
#footerleft
{
text-align：right;
width：120px;
padding：0px;
margin：0px;
float：left;
}
＃footer-menu-div
{
float：left;
padding：0px 5px 0px 5px;
margin：auto;
text-align：left;
position：relative;
display：block;
}
＃footer-menu-div：after {
content：;
clear：both;
display：block;
}
ul＃footer-menu
{
margin：0px;
padding：0px;
}
ul＃footer-menu li
{
background-color：＃c7c6c6;
color：＃212121;
font-weight：bold;
font-size：11px;
list-style：none;
display：inline;
margin：0px;
padding：5px 10px 5px 10px;
font-family：Arial，Helvetica，sans-serif;
float：left;
text-transformation：capitalize;
position：relative;
}
ul＃footer-menu li：first-child
{
border-top-left-radius：5px 5px;
border-bottom-left-radius：5px 5px;
}
ul＃footer-menu li：last-child
{
border-top-right-radius：5px 5px;
border-bottom-right-radius：5px 5px;
}
ul＃footer-menu li ul
{
display：block;
position：absolute;
margin：0;
padding：0;
}
ul＃footer-menu li ul li
{
background-color：transparent;
font-weight：normal;
display：inline;
}
UPDATE
我只希望带圆角的条带在顶级列表项目周围，而不是在所有项目周围。
更新2 实际事实，每个列表项的内容将是< a> 链接。
根据到目前为止的反馈，我设法提出了这，但我有用< a> 和 width：100％来做背景才能继续下一个顶级项目，并且由于它离开水平空间。 ：（
如果有一种方法可以使顶级项目链接与子链接中最长的链接一样宽，则问题会得到解决。
我想这两个问题应该通过摆脱 ul＃footer-menu li ul {position：absolute;} 。这会立即解决滚动问题，但是我们仍然需要列表项显示一行，所以，添加： ul＃footer-menu li ul li {display：block ; float：none;} 。
现在剩下的唯一问题是背景不一致，我想你需要
把背景放在< ul> 上像这样： ul＃footer-menu {overflow：hidden; background-color：＃C7C6C6; border -radius：5px;} 。然后可以删除 background-color 和 border-radius ：//jsfiddle.net/TLRSC/6/rel =nofollow> http://jsfiddle.net/TLRSC/6/
I am trying to get a footer menu styled in CSS using nested lists, since that seems the standard way nowadays most CMSes work with. However I am having a hell of a hard time getting the width and height dynamically expanding to the right sizes. So each top level list item is positioned horizontally, while each child level list item is then listed underneath.
Problem 1: I want the total width of the top level list item to be the width of either the longest child list item or the top list item, whichever is longer. I don't want breaking lines.
Problem 2: The height of the surrounding DIVs is not expanding (tried using both overflow: auto and also the clear: both approach with the :after CSS selector) and scrollbars are displaying instead.
I want to avoid fixing heights because I want to make the menus dynamic.
What do I have to do to solve the above issues? This is what I have so far: (live example)
<div id="footer">
<div id="footerstrip" >
<div id="footercontent" >
<div id="footerleft">
<img src="images/LogoGrey.png" /> <a href="#"><img src="images/FooterHome.png" /></a>
</div>
<div id="footer-menu-div">
<ul id="footer-menu">
<li>Fashion
<ul>
<li>Apparel</li>
<li>Celebrity Styles</li>
<li>Fashion Spotlight</li>
<li>Trends</li>
</ul>
</li>
<li>Beauty
<ul>
<li>Hair</li>
<li>Skincare</li>
<li>Make-up & Cosmetics</li>
<li>Nails</li>
</ul>
</li>
</li>
<li>Lifestyle</li>
<li>Love</li>
<li>Culture</li>
<li>Subscribe</li>
<li>Events</li>
</ul>
</div>
</div>
</div>
The CSS:
#footer
{
margin-top: 30px;
clear: both;
width: 100%;
}
#footerstrip
{
background-color: #F0F0F0;
width: 100%;
margin-top: 20px;
overflow: auto;
}
#footercontent
{
padding: 10px 0px 10px 0px;
width: 1100px;
text-align: left;
color: #666666;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
vertical-align:middle;
margin: auto;
overflow: auto;
background-color: #e0e0df;
}
#footercontent a
{
color: #666666;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
overflow: auto;
}
#footercontent img
{
vertical-align: middle;
margin-left: 5px;
}
#footerleft
{
text-align:right;
width: 120px;
padding: 0px;
margin: 0px;
float: left;
}
#footer-menu-div
{
float: left;
padding: 0px 5px 0px 5px;
margin: auto;
text-align: left;
position: relative;
display: block;
}
#footer-menu-div:after {
content:"";
clear:both;
display:block;
}
ul#footer-menu
{
margin: 0px;
padding: 0px;
}
ul#footer-menu li
{
background-color: #c7c6c6;
color: #212121;
font-weight: bold;
font-size: 11px;
list-style: none;
display: inline;
margin: 0px;
padding: 5px 10px 5px 10px;
font-family:Arial, Helvetica, sans-serif;
float: left;
text-transform: capitalize;
position: relative;
}
ul#footer-menu li:first-child
{
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
ul#footer-menu li:last-child
{
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
ul#footer-menu li ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
ul#footer-menu li ul li
{
background-color: transparent;
font-weight: normal;
display: inline;
}
UPDATE
I only want that strip with the rounded corners to be around the top level list items, not around all the items. So it will be around one line all horizontally.
UPDATE 2
In actual fact, the contents of each list item will be an <a> link.
Based on the feedback so far, I managed to come up with this, however I had to do the <a> with width: 100% in order for the background to continue with the next top level item, and due to this its going out of horizontal space. :(
If there is a way to make the top level item links be as wide as the longest of the child links the issue would be solved.
I think both problems should be solved by getting rid of ul#footer-menu li ul { position: absolute; }. This immediately solves the scrolling problem but we still need the list items to display one per line. So, add this: ul#footer-menu li ul li { display: block; float: none; }.
Now the only remaining problem is the background being inconsistent. I think you will need to
put the background on the <ul> like so: ul#footer-menu { overflow: hidden; background-color: #C7C6C6; border-radius: 5px; }. Then you can remove background-color and border-radius from the <li> elements.
Here's the finished product in JSFiddle: http://jsfiddle.net/TLRSC/6/
这篇关于CSS嵌套列表宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
