javascript - 我如何定义 "the rest of width"？

Question

这是我的代码:

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

现在我想为 input 设置 border:none 并且我还需要让它的宽度等于 div.tags 的其余部分的宽度。

请注意，附加标签的数量不是恒定的。如您所见，您可以添加新标签。

我该怎么做？

---

Edit1:我不能使用 flex .. 因为我网站的大多数用户都使用旧浏览器。

---

Edit2:当我添加一些新标签时，我当前的输入跳转到了一个新行。我想永远保持在同一条线上。我想要类似 tag input in this page 的东西.

方向也应该是rtl。

Answer 1

您可以使用 flexbox 通过将 display: flex 设置为您的容器(也可以为 RTL 设置 flex-direction: row-reverse布局)，然后在输入元素上添加 flex-grow: 1。

这样输入元素将增长容器中空闲的宽度。