0

バンドのリストがあり、すべての画像がバンドのロゴ (または何か) の小さなセット画像になる Web ページをデザインしようとしています。私はスタイルinlineを設定していますが、試してみvertical-alignましたがline-height、何もうまくいかないようです。

でこれを達成できると確信しtablesていますが、table.

    <div id ="Content">
        <ul>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>

        </ul>
    </div>

ここに私が持っている少量のCSSがあります

    #content li{display:inline;}
    img {
    max-height:100px;
    max-width: 100px;
    }

   #content ul{list-style-type: none;
    clear:left;
   }

どんな助けやヒントも大歓迎です

4

3 に答える 3

1

あなたがやろうとしていることを理解したら、これを試してください：

#content li {
    display: inline-block;
    background-color: #eaeaea;
    border: 1px solid red;
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    margin: 5px;
}

img {
    max-height:100px;
    max-width: 100px;
    display: block;
}

#content ul{
    list-style-type: none;
    clear:left;
}​

ここでそれを見てください：http://jsfiddle.net/zDhKQ/

于 2012-11-14T19:55:43.153 に答える
1

私の最善の推測は、あなたがこれを探しているということです：

#content ul li {
   float:left; 
}

それ以外の場合は、達成しようとしていることをもう少し具体的にする必要があります。

于 2012-11-14T19:46:38.737 に答える
0

align タグが必要だと思います。このようなもの：

<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>

見栄えの良いものに仕上がります。

于 2012-11-14T19:49:48.950 に答える