Question

对于每个列表项，我想要一个图像下面有文字的图像。我读了这个technique，但在IE中不支持。相反，我将列表项浮动到左侧。除了列表下面的内容包装在右边之外，它才能解决问题。如何防止内容以这种方式包装？这是我的代码：

<style>
    .horizlist{
        list-style:none;
        text-align:center;      
    }
    #menulist ul{
        width:360px;
    }
    #menulist li{
        float:left;
        padding-right:50px;
    }
    #menulist li img{
        display:block;
    }
</style>
<div id="container" style="">
    <div id="top">
        <img src="joblove.jpg" style="float:right;">
        <div id="title" style="width:500px;text-align:center;">
        <h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
        <p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
        </div>
    </div>
    <div id="menulist">
        <ul class="horizlist" >
            <li>
                <a href="home"><img src="images/purplestyle_11_home.png"></img><span>Home</span></a>
            </li>
            <li>
                <a href="brochure"><img src="images/purplestyle_01_heart.png"><span>Brochure</span></a>
            </li>
            <li>
                <a href="video"><img src="images/purplestyle_05_cut.png"><span>Video</span></a>
            </li>
            <li>
                <a href="personality"><img src="images/purplestyle_15_buddies.png"><span>Personality</span></a>
            </li>
            <li>
                <a href="resources"><img src="images/purplestyle_03_folder.png"><span>Resources</span></a>
            </li>
            <li>
                <a href="FAQ"><img src="images/purplestyle_02_talk.png"><span>FAQ</span></a>
            </li>
        </ul>
    </div>
    <img src="phone.jpg">
    <ul class="horizlist">
        <li><button type="button">Click </li>
        <li></li>
    </ul>

</div>

Answer 1

在css中为#menulist添加高度：

 #menulist ul{
    width:360px;
    height:100px;
 }

Answer 2

使用CSS背景。它们可以让您更好地控制图像定位，并且需要更少的标记。

HTML：

<a class="home" href="home">Home</a>

CSS：

.horizlist a {
   display:block;
   background-repeat:no-repeat;
   padding-top: 20px;
   padding-left: 20px
   background-position: 10px 10px;

a.home {
   background-image:url(/images/purplestyle_11_home.png);
}

可以调整填充和背景位置值以适应。根据需要重复。

带图像和文字的水平列表

2 个答案: