Question

在这里，我正在列表标签内动态添加按钮。按钮显示在列表附近，我正在尝试将其向右移动。当dom创建按钮时，有什么办法可以做到？需要指导。

{
    var button = document.createElement("button");
    button.innerHTML = "Add To Favourite";
    button.setAttribute('onclick',
        'addFavourite("' + movie['title'] + '")');
    data.appendChild(button);
}

Answer 1

您可以使用float: right;将按钮移到<li>的最右侧。您还可以使用margin-left: 40px;将其向<li>的右侧移动一些空格

var data = document.getElementById('container');
var button = document.createElement("button");
button.innerHTML = "Add To Favourite";  
button.className = 'liBtn';
button.setAttribute('onclick',
'addFavourite("sss")');
data.appendChild(button);

.liBtn{
  margin-left: 40px;
}

<ul>
  <li id='container'>List 1</li>
</ul>

Answer 2

如果您想调整，请尝试margin-left。选中我为您的情况写的Fiddle。希望它能起作用！

Answer 3

您可以直接使用内联属性float or margin（button.style.float =“ right”）

或者您可以使用el.style设置内联样式，并在此字符串中传递所有样式。像这样：

// Create element
var button = document.createElement("button");
button.innerHTML = "Add To Favourite";                     
button.setAttribute('onclick', addFavourite("'+movie['title']+'"));

// Styling
var styleButton = "float: right; margin-left: 10px;";
button.setAttribute('style', styleButton);

// append
data.appendChild(button);

使用浮点数：Float CSS property MDN

使用保证金：Margin CSS property

使用DOM属性创建的样式按钮？

3 个答案: