Question

尝试解释问题是非常困难的，但如果你看一下JSFiddle我创造的东西会更加清晰。

首先你会注意到行的行高不相等，即使高度应该设置为33％，因此所有行都应该同样高。但遗憾的是情况并非如此......

其次，有一个更长的链接应该包含在它自己的按钮内，此时按钮类型被切断一半，造成一个破碎的外观。

同样，就我的特定问题命名这篇文章真的很困难。看看JSFiddle会让事情更加清晰。

//Ignore this comment

Answer 1

我更新了您的代码并更改了您的CSS。

Add float:left to #specialist-area-nav,#specialist-area-nav a,#specialist-area-nav .row, #specialist-area-nav .col;
Ad  margin-top:1% to #specialist-area-nav .row;
Change #specialist-area-nav a padding to 5px;
Add margin-left:1% to #specialist-area-nav .col;
Change #specialist-area-nav .row height to 32%;
Add white-space: nowrap to #specialist-area-nav a;

JSFiddle Updated Source

Answer 2

这是因为定义了最大百分比宽度，按钮将被切成两半，找到空白区域。要解决此问题，请在代码中添加以下内容：

#specialist-area-nav a{
    white-space: nowrap;
}

这样可以防止按钮断开，并使它们保持相同的高度。

JSFiddle

Answer 3

添加#specialist-area-nav a{ display:inline-block; }会解决一些问题，但之后您还可以进行更多调整。

Div高度和链接线断开/包裹

3 个答案: