CODEWITHSUNDEEP
javascripthtmlcss
V555
V555

Reputation: 43

HTML/CSS. Why field floating left?

I have a <div> with checkbox and button inside and wanna put field between them, but the field is always leftmost. I tried to use text instead of filed and that worked, but filed doesn't want to obey to my CSS rules.

enter image description here

Also, I need to position all of those using 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);

Some CSS rules:

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

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

Upvotes: 1

Views: 102

Answers (3)

Vincent
Vincent

Reputation: 9

float: center doesn't exist. Above answers are pretty clear. But if you need a very simple answer, use this.

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

if you want to move the whole thing into a specific position or style, use tag.

Upvotes: -1

brk
brk

Reputation: 50291

You can use string literals. The other issue is the use of class name as .itemsField, you need to remove the dot. In your code you are appending the div with innerText X at the last

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>

Upvotes: 2

Harley Liang
Harley Liang

Reputation: 102

I think the reason why the css classes don't obey the rules is due to your script. So try changing

itemsField.className = '.itemsField';

to

itemsField.className = 'itemsField';

Besides, I don't think that there is a "center" value for the "float" property ... 

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

If you want to center something, use text-align : center instead. Hope this help.

Upvotes: 3

Related Questions