css - 如何将我的按钮样式设置为位于屏幕底部

Question

边距:底部；不工作，我需要一个替代方案，可以将我屏幕上的所有按钮向下移动。我正在制作一个刽子手游戏，我需要把我的话放在按钮上方进行猜测。当按钮位于顶部时，我不能这样做。我需要帮助才能找到可以向下移动按钮的 css 命令!非常感谢!

尝试 margin :底部；和 vertical-align 但都不起作用......不知道为什么

/*these create my 26 alphabet buttons, and are essentially the thing I need to move downwards. */
for (var i = 0; i < 26; i++){
   var etl = document.createElement("BUTTON");
   var let = String.fromCharCode(97+i);
   var tee = document.createTextNode(let);
   etl.appendChild(tee);
   document.body.appendChild(etl);
}

/* my css so far used to style my buttons along with my failed attempt to lower the buttons */

BUTTON { 
    margin: bottom;
    height: 50px;
    width: 50px;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 9pt;
    outline: none;
    width: 50px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    color: black;
    background-color: white;
    margin: 5px;
    font-family: "HelveticaNeue-UltraLight", "Helvetica Ultra Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

我希望按钮位于页面底部，但它们仍然位于顶部。

Answer 1

你需要将posution设置为fixed，

位置:固定； 底部:0%;

更新
JS:

var div = document.createElement("DIV")
for (var i = 0; i < 26; i++){
  var btn = document.createElement("BUTTON");

   var let = String.fromCharCode(97+i);
   var tee = document.createTextNode(let);
   btn.appendChild(tee);
  btn.className = "buttonStyle";
  div.appendChild(btn);
  }
  document.body.appendChild(div);

CSS:

   div { 
  position: fixed; 
    bottom:0%;  
    }
        .buttonStyle {
    padding: 10px 15px;
    font-weight: bold;
    font-size: 9pt;
    outline: none;
    cursor: pointer;
    text-align: center;
    color: black;
    background-color: white;
    margin: 5px;
    font-family: "HelveticaNeue-UltraLight", "Helvetica Ultra Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
                      }