如何将带有图形链接的列表转换为内联列表？

Posted 2023-03-04

【中文标题】如何将带有图形链接的列表转换为内联列表？

【英文标题】：How do I convert a list with graphical links to an inline list?

【发布时间】：2010-09-07 21:25:39

【问题描述】：

鉴于此 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 列表转换为内联列表？

【参考方案1】：

试试这个：

#topnav 
    overflow:hidden;

#topnav li 
    float:left;

对于 IE，您需要添加以下内容：

#topnav 
    zoom:1;

否则你的浮动

标签会溢出包含的标签。

【参考方案2】：

将元素向左浮动的另一种方法是：

#topnav li 
    display: inline;

【参考方案3】：

另一种方法是将display: inline-block 用于li s：

#topnav li 
    display: inline-block;