html - 浮点输入保持宽度

Question

我对 css 很陌生，但我有一个输入，我试图漂浮在动态生成的标签旁边，但它一直把它降低一个级别。

如果我将 css 更改为向左浮动，则输入字段会缩小。我确信这很简单，我只是想念 css 的新手。

体面的东西，css和html是重要的部分，所以这里有一个我认为是罪魁祸首的小提琴和摘录。

#to-address ul li, #from-address ul li {
list-style-type: none;
width: auto;
float: left;
/* ^^^ remove this line =>full size bar, tag acts as block level element */}

jsFiddle

谢谢。

EDIT1：澄清一下，因为我有点遗漏了它，目标是有一个输入栏，用户可以在其中单击栏中的任何位置，为什么它需要填充宽度。它应该允许用户在新创建的标签旁边继续输入。该float: left;行允许它与标签保持内联，但会覆盖width: 100%允许用户单击任何位置开始输入的效果。

Answer 1

您将需要更改width:auto为width:100%

 #to-address ul li, #from-address ul li {
 list-style-type: none;
 width: 100%;  //this will make your lists width 100%
 float: left;
 }

编辑：如果您需要将输入保持在顶部，那么您将需要稍微更改您的 JS 代码

$(this).parent().after('<li class="tag-address" name="' + value + '">' + value + '<span class="tag-delete">&times;</span></li>');

更改.before为.after

例子

Answer 2

尝试更改width: auto;为width: 100%