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

现在，问题是：我在第二个框中的链接文本不超过两行，这与链接文本在三行中传播的其他两个框不同。这个框在 IE 和 FireFox 中看起来非常好，但是当我在 Google Chrome 或 Safari 中打开该站点时，中间的框（文本相对较短）会弹出。如果我使文本足够长以跨越三行，它就会回到原来的位置。我无法弄清楚如何解决这个问题。我很抱歉不能以简单而简短的方式解决我的问题。我对网页设计相对缺乏经验。如果你们能帮助我，我将不胜感激。提前致谢。

4

1 回答 1

7

好的，经过更多挖掘，我发现这是一个计算浮点问题。

我相信添加：

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

will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.

Hope this helps!

Mason

于 2012-07-09T20:45:04.273 回答