如何将带有图形链接的列表转换为内联列表?
时间:2020-03-05 18:48:00 来源:igfitidea点击:
鉴于此HTML:
<ul id="topnav"> <li id="topnav_galleries"><a href="#">Galleries</a></li> <li id="topnav_information"><a href="#">Information</a></li> </ul>
而这个CSS:
#topnav_galleries a, #topnav_information a { background-repeat: no-repeat; text-indent: -9000px; padding: 0; margin: 0 0; overflow: hidden; height: 46px; width: 136px; display: block; } #topnav { list-style-type: none; } #topnav_galleries a { background-image: url('image1.jpg'); } #topnav_information a { background-image: url('image2.jpg'); }
如何将" topnav"列表转换为内联列表?
解决方案
回答
给列表项一个'width'(50%
?)并将其浮动'left'更为常见,因为对内联块的支持不是很好。
回答
试试这个:
#topnav { overflow:hidden; } #topnav li { float:left; }
对于IE,我们需要添加以下内容:
#topnav { zoom:1; }
否则,浮动的<li>标签将从包含的<ul>中溢出。
回答
浮动剩余元素的一种替代方法是:
#topnav li { display: inline; }