javascript - css float 元素错误

Question

我有一个关于 div 和输入 float 的小问题:

这是我的问题，当你在输入框中输入并按下回车时，使用 jQuery 脚本，将添加一个 div 元素，但如果我们写了超过 4 个元素，输入框保留在第一行和元素下去。谁能帮帮我？

div.box {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  padding: 5px;
}
div.box>div.element {
  background-color: #00B5B5;
  display: inline-block;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 8px 2px 8px;
  border-radius: 5px;
  line-height: normal;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 4px;
  float: left;
}
div.box>input#group-input {
  height: 11px;
  /*border: none;*/
  font-size: 12px;
  outline: none;
  vertical-align: top;
  width: 8px;
}

<div class="box" id="box-ins-group">
  <div class="element" id="1">prova</div>
  <input type="text" id="group-input">
</div>

我已经尝试了所有方法但仍然无法正常工作 :( 抱歉我的英语不好

-- Jquery代码:

var counter = 0;
$('#group-input').keypress(function(e) {
  if(e.which == 13) {
    if($('#group-input').val().length > 3) {
    $( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
    $('#group-input').val(''); 
    counter++; 
   }
  }  
}); 

计数器是一个变量

Answer 1

你需要在输入上设置 float: left，然后在你的 js 中改变它:

$( "div#box-ins-group" ).append

到:

$( "input#group-input" ).before

问题是您将这些元素附加到包含 .element div 和输入的元素，因此即使您修复了输入上的 float 问题，新的 .element div 也会始终出现在DOM 中的输入。这是一个 fiddle .

还值得注意的是，您可以删除 display: inline-block，因为当您使用 float 时它会被忽略。