4

私はウェブサイトを構築しようとしていますが、li に display: inline-block; というトリッキーな問題が発生しました。財産。

私のウェブサイトは: http://www.gypsytours.in/

このサイトにアクセスすると、ホームページで、「ジプシー ツアーによるヒマラヤ パッケージ」という見出しの下に水平方向のリストがあります。

このリストには、display: block; を持つブロック要素 A があります。財産。

ここに私の簡略化されたコードがあります:

HTML :

<div id="menu-board">
<ul>
<li><a href="#">Elephant Safari Packages in Jim Corbett Park, India</a></li>
<li><a href="#">Chopta Tungnath Trekking Package</a></li>
<li><a href="#">River Rafting Packages in Rishikesh</a></li>
</ul>
</div>

CSS :

#menu-board
{
    text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
    float: none;
    display: inline-block;
}
#menu-board ul li a
{
    display: block;
    width: 180px;
    height: 130px;
    background-color: #C50000;
    text-align: center;
    overflow: hidden;
}

さて、問題は次のとおりです。リンクテキストが3行に広がる他の2つのボックスとは異なり、2番目のボックスのリンクテキストは2行を超えません。このボックスは IE と FireFox では問題なく表示されますが、Google Chrome または Safari でサイトを開くと、中央のボックス (比較的短いテキスト) が表示されます。テキストを 3 行にまたがるほど長くすると、元の位置に戻ります。これを修正する方法がわかりません。私の問題を簡潔かつ簡潔に伝えることができなかったことをお詫びします。私はWebデザインの経験が比較的浅いです。皆さんが私を助けてくれれば、本当に感謝しています。前もって感謝します。

4

1 に答える 1

7

OK、さらに掘り下げた後、計算されたフロートの問題であることがわかりました。

追加すると思います：

#splash-list ul li a {
    float:left;
}

問題を解決します。他のブラウザーでは計算がわずかに異なる場合がありますが、少なくとも適切な行に表示されます。

お役に立てれば！

石工

于 2012-07-09T20:45:04.273 に答える