javascript - HTML/CSS。为什么字段向左浮动？

Question

我有一个 <div>里面有复选框和按钮，想在它们之间放置字段，但字段总是最左边。我尝试使用 text 而不是 filed 并且有效，但 filed 不想遵守我的 CSS 规则。

此外，我需要定位所有使用 JavaScript 的对象。

    var list = document.getElementById("list");

    var item = document.createElement("div");
    item.className="item";
    list.appendChild(item);
    var itemsField = document.createElement("input");
    itemsField.setAttribute('type', 'input');
    itemsField.className = '.itemsField';
    item.appendChild(itemsField);

    var taken = document.createElement("input");
...
    item.appendChild(taken);

...
    item.appendChild(del);

一些 CSS 规则:

.itemsField {
    display: inline-block;
    float:center;
    margin-left:1%;
}

checkbox {
    display: inline-block;
    float:left;
    width:auto;
}

Answer 1

我认为 css 类不遵守规则的原因是您的脚本。所以尝试改变

itemsField.className = '.itemsField';

到

itemsField.className = 'itemsField';

此外，我认为“ float ”属性没有“中心”值......

.itemsField {
    display: inline-block;
    float:center;
    margin-left:1%;
}

如果你想居中，使用 text-align : center 代替。希望对您有所帮助。