css浮动元素错误

Question

我有一个关于div和输入浮动的小问题：

这是我的问题，用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 和输入的元素中，因此即使您修复了输入上的浮动问题，新的 .element div 也会始终出现在DOM 中的输入。这是fiddle。

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

Answer 2

似乎药丸是浮动的，但输入不是。试试这个（如果你还没有）：

div.container div.edit-local div.form table tr td>div.box>input#group-input {
    height: 11px;
    /*border: none;*/
    font-size: 12px;
    outline: none;
    vertical-align: top;
    width:8px; 
    float: left;
}