Question

我正在尝试建立一个网站并遇到一个棘手的问题，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中打开网站时，中间的框（文本相对较短）会弹出。如果我使文本足够长以跨越三行，它将回到原始位置。我无法弄清楚如何解决这个问题。对于无法以简单和简短的方式解决我的问题，我深表歉意。我对网页设计相对缺乏经验。如果你们能帮助我，我将非常感激。提前谢谢。

Answer 1

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

我相信添加：

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

将解决问题。它可能在其他浏览器上的计算方式略有不同，但至少它们会在正确的行中。

希望这有帮助！

梅森

li with display：inline-block;物业在Google Chrome＆amp; amp;苹果浏览器

1 个答案: