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

padding と background-position の値を適切に調整できます。必要に応じて繰り返します。

于 2013-10-22T20:09:09.333 に答える