1

对于每个列表项，我想要一个图像下方有文本的图像。我阅读了这种技术，但 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>
4

2 回答 2

1

在 css 中为 #menulist 添加高度：

 #menulist ul{
    width:360px;
    height:100px;
 }
于 2013-10-22T20:16:57.290 回答
0

使用 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);
}

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

于 2013-10-22T20:09:09.333 回答