html - float 入力保持幅

Question

私はcssにかなり慣れていませんが、動的に生成されたタグの横に浮かせようとしているという入力がありますが、レベルを下げ続けています。

css を float left に変更すると、入力フィールドが縮小します。これは、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 */}

jsフィドル

ありがとう。

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%