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>

​</h2>

(2)

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

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

Answer 1

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

演示

代码：

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

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

---

要将 推到button外部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 */
}

检查演示

Answer 2

我认为这种 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>

额外的：

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