0

我正在使用一个名为 Impromptu 的 jQuery 插件。它基本上是一个干净的模态框插件。在模态框的底部，它有一个按钮栏，但稍后在代码中我不得不使用更多的 JS 来动态添加一个额外的按钮，但位于左侧。它在除 IE 之外的所有浏览器中看起来都很好（未测试 6 或 8，但此问题出现在 IE 7 中并在 9 中修复）。

在此处查看图片：http: //screencast.com/t/g1EmKu2KqXfB

左侧的按钮与右侧的按钮具有相同的类，除了两个额外的属性：position:relative和float:left。在divwhich 持有按钮之后，我添加了一个额外的divwith clear:left，但这似乎没有任何影响。

按钮本身是简单button的元素，语法相当繁重。例如，这是新添加的（有问题的）按钮的 HTML：

<button value="next" onclick="somefunction()" id="jqi_state0_buttonNext" name="jqi_state0_buttonNext" class="dynamo_temp_button">Next Page</button>

.dynamo_temp_button是具有前面所述position:relative和的类float:left。

如何使按钮与其他按钮保持在同一行，但保持其位置浮动在左侧？

小提琴：http: //jsfiddle.net/rRFqv/

4

1 回答 1

1

右边2个按钮没有浮动，IE对齐非浮动&浮动有问题

试试这个演示：

jsfiddle

div.jqi .jqibuttons{
    text-align: right;
    padding: 5px 0 5px 0;
    border: solid 1px #eeeeee;
    background-color: #f4f4f4;
    overflow: hidden; //added
}
div.jqi button{
    padding: 3px 10px;
    margin: 0 10px;
    background-color: #2F6073;
    border: solid 1px #f4f4f4;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    background-image: none;
    float: right; //added
}
.dynamo_temp_button {
    position : relative;
    float : left!important; //added
}
于 2012-08-12T17:58:34.600 回答