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

时间: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;
}