当标签文本增长时，使提交按钮向左扩展

Question

我正在尝试从 Bootstrap 创建一个看起来像输入组的东西，并在右侧附加按钮。

我最初使用的是他们的控件，除了按钮标签变大时我需要让按钮增长到 LEFT 而不是正常的向右增长。

例如，如果按钮在单击后说“开始”，则需要说“处理您的数据”，然后在几秒钟内返回“开始”和正常宽度。

我尝试了固定定位和其他技巧，但按钮仍然向右增长，或者在调整窗口大小时按钮和输入字段分开。

所以我正在尝试 Flexbox：

.input-group-msgbox {
    display: flex;
    input {
      // Shrink and grow as needed, but never shrink so
      // small that we can't read the placeholder
      flex: 1 0 8em;
    }
    .btn {
      // Never shrink or grow
      flex: 0 0 auto;
    }
}

请看这支笔：http://codepen.io/smlombardi/pen/wKdVMP

除了文本“向左增长”之外，它什么都做。想法？

Answer 1

所以这里有两个通用选项（非 Bootstrap）：

选项 #1

将div容器的direction从左到右改为从右到左：

.input-group-msgbox { direction: rtl; }

然后将源中<input>和<button>的顺序颠倒一下：

<div class="input-group-msgbox">
    <span class="input-group-btn">
        <button class="btn btn-default" ... > ... </button>
    </span>
    <input type="text" class="form-control" ...>
</div>

然后将direction从左到右应用到<input>和<button>：

input { direction: ltr; }
.btn { direction: ltr; }

现在，当标签文本展开时，提交按钮会向左增长。

Revised Codepen

选项 #2

LADDA 脚本解决方案。