css - 如何将两个 DOM 元素放在同一行

Question

我正在尝试将 $('.prize-item input') 和 $('.prize-edit') 放在同一行

这是 DOM 结构 (1) 和 CSS 代码 (2)。

我试图起诉 display:inline-block 但没有成功。

先决条件如下:
1) 不得使用绝对位置。
2)调整屏幕大小，按钮和输入框之间的距离不要改变。
3) 仅当无法获得我用 CSS 请求的结果时才应更改 DOM 结构。

演示:http://jsfiddle.net/jBme9/8/

---

(1)

<div class="control-group">
    <div class="controls">
        <div class="prize-edit">
            <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
        </div>
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize same line">
                </div>
            </div>
        </div>

    </div> 
</div>

(2)

.prize-edit {
    float: right;
    display: inline-block;
}

.prize-item input {
    float: left;
    display: inline-block;
}

Answer 1

您可以使用相对定位。请为您的实际页面调整这些值。

Demo

代码:

.controls button {
    float: right;
    position:relative;
    top:38px;
    right:17px;
}

我使用像素是因为您使用的是像素，但这也可以用 em 来完成。

---

要将 button 推到 input 之外，请将另一个类添加到 input 的包装器中。我们称它为“controlsWrapper”。

这样你就可以在 html 中拥有:

<div class="controls controlsWrapper"><input...other stuff...></div>

在 CSS 中

.controls button {
    float: right;
    position:relative;
    top:38px;
}
.controlsWrapper {
    box-sizing: border-box;
    width:100%;
    padding-right:40px; /* width of the button + some space */
}

Check the demo