0

我不明白为什么会这样：我有两个div通常并排的内联元素（一个内部带有提交按钮）。然后我想让第二个div不可见（display: none;），然后实现slideTogglejQuery 函数来显示/隐藏按钮。

当第二个div最初可见时，它们是并排的，一切正常。但是当它最初是不可见的时，单击div以显示按钮时，它会出现在第一个div.

JSFiddle：（jsfiddle）

<div>
    <div style="display:inline-block; width:500px; background:red;" onclick="$('#button_div').slideToggle('fast');">
        <h2 style="display:inline-block;">Some text</h2>
    </div>


    <div style="display:inline-block; vertical-align:middle; display: none;" id="button_div" name="button_div">
       <input type="submit" id="create_button" name="create_button" value="Create" />
    </div>
</div>
4

2 回答 2

1

如果您通过非内联 css 向您的元素声明，则 jQuery 将在和而不是display: inline-block;之间切换：inline-blocknoneblock

CSS

#button_div {
    display:inline-block;
}​

演示

于 2013-01-03T22:34:45.057 回答
0

您应该使用float:left代替display:inline-block，或visibility:hidden代替display:none;。

于 2013-01-03T22:20:30.640 回答