HTML / CSS。 為什么字段向左浮動？

Question

我有一個<div> ，里面有復選框和按鈕，想在它們之間放置字段，但是該字段始終是最左邊的。 我嘗試使用文本而不是歸檔，並且可行，但是歸檔不想遵守我的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 。 希望對您有所幫助。

Answer 2

您可以使用字符串文字。 另一個問題是將類名用作.itemsField ，需要刪除點。 在您的代碼中，最后將div附加innerText X

 var list = document.getElementById("list"); let innerDOM = `<div> <input type = 'input' class ='itemsField'><span>X</span><input type ='checkbox' name ='taken'> </div>`; list.innerHTML = innerDOM; 

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

 <div id='list'></div> 

Answer 3

浮動：中心不存在。 以上答案很清楚。 但是，如果您需要一個非常簡單的答案，請使用此方法。

        <center>
     <input type="checkbox"> <input type="textarea"> <input type="submit" value="Submit"><br>
     </center>

如果要將整件事移動到特定位置或樣式，請使用標簽。