Q

css对齐问题与溢出和内嵌对象与溢出：隐藏

html
css

2012-01-06 72 views 1 likes

1

我想有一个div显示：内嵌块溢出：隐藏。我的问题是overflow：hidden会压下相邻的内嵌块元素。css对齐问题与溢出和内嵌对象与溢出：隐藏

示范： http://jsfiddle.net/vNDmX/

谁能解释为什么出现这种情况？我该如何解决呢？

更新：这是一个特定于Firefox的问题。浮动：左侧有点作用，但它仍然以间距排列：http://jsfiddle.net/vNDmX/3/。

2012-01-06 Blazes

+0

你可以发布你的CSS？ – Brian 2012-01-06 21:34:29

+0

您发布的演示不会概述问题。 – Wex 2012-01-06 21:34:35

+1

它在Firefox中。 – 2012-01-06 21:36:26

A

回答

5

这是一个Firefox特定的错误（这里的a related question我发现调查这时候）。修复似乎是设置vertical-align: top。

下面是修复的例子，以及一些边境添加到显示内容：

http://jsfiddle.net/vNDmX/5/

button { 
    vertical-align: top; 
}

2012-01-06 21:43:23 Nate

+1

这正是我所期待的。如果我能给你+10，我会的！感谢m8！ – Blazes 2012-01-06 21:46:12

+0

@Blazes对于各种其他布局问题，使用'display：inline-block;'时，您应该几乎总是使用'vertical-align：top;'。 – ThinkingStiff 2012-01-06 21:48:18

+0

很高兴帮助！ – Nate 2012-01-06 21:49:18

1

尝试使用float：

HTML5：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head></head> 
    <body> 
     <button id="button1">Button1</button> 
     <button id="button2">Button2</button> 
    </body> 
</html>

的Javascript：

$(document).ready(function(){ 
    var wrapper = '<div style="display:block;float:left;" />'; 
    $('#button1').wrap(wrapper); 
});

2012-01-06 21:41:23

+0

变了，不便之处。 – 2012-01-06 21:48:04

0

看起来好像设置在div溢出导致它失去跟踪的地方其基线是。其基线应该是button的基线，但它是button的底部。这意味着第二个button会尝试将其基线调整到错误的位置。解决此问题的一种方法是在div上使用vertical-align: bottom;。

2012-01-06 21:45:41 Neil

相关问题