Css 如何将两个DOM元素放在同一行上

我试图将

$（'.prize item input'）

和

$（'.prize edit'）

放在同一行中

下面是DOM结构（1）和CSS代码（2）

我试图起诉

display:inline块

，但没有成功

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

演示：

---

(一)

---

可以使用相对定位。请根据实际页面调整这些值

代码：

我使用像素是因为你使用像素，但这也可以通过

em

s来实现

---

要在

输入

外部按下

按钮

，请将另一个类添加到输入的包装器中。让我们称之为“controlsWrapper”

因此，您将在html中看到：

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

---

我认为使用这种DOM结构是不可能的。你想要这样的东西：

<div class="aWrapper">
  <div class="control-group">
    <label class="control-label">Name</label>
    <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-input"><!-- I renamed the class! -->
                <input type="text" class="form-prize-item-name" value="prize same line">
      </div>
    </div>
  </div>
</div>

---

您的输入框中需要一个按钮吗？嗨@Mr.Alien，不完全需要。我想有编辑按钮的权利，而不是输入内。+1嗨，你的解决方案是好的。实际上我希望输入框右边的按钮不在里面。有什么想法吗？这肯定是一个更好的解决方案+1Thanks@Mr.Alien，我也想到了%的输入，但这会导致不同屏幕大小的问题…@GionaF我尝试了相同的方法，但这是一个好方法，我得到了%大约80..然后将输入框向左浮动

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

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

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

<div class="aWrapper">
  <div class="control-group">
    <label class="control-label">Name</label>
    <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-input"><!-- I renamed the class! -->
                <input type="text" class="form-prize-item-name" value="prize same line">
      </div>
    </div>
  </div>
</div>

.label { diplay: block; }
.prize-edit { float: right; width: 20%; // adjust with paddings etc. }
.prize-input { float: left; width: 80% // adjust ... }