Question

我想尝试使用同一行$('.prize-item input')和$('.prize-edit')

这是DOM结构（1）和CSS代码（2）。

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

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

（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之外，请在输入的包装器中添加另一个类。我们称之为“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

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 ... }

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

2 个答案: