html - 在不影响标题文本的情况下无法移动按钮

问题描述

我有这个由 HTML5 和 CSS3 制成的登录页面，但我无法调整登录按钮。每次我尝试将其与margin: 属性对齐时，它也会影响“欢迎”文本。如何只移动按钮而不影响文本？

<!DOCTYPE html>
<head>
 <style>
   html {
       background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
       background-repeat: no-repeat;
       min-height: 100%;
       background-size: cover;
   }

   h1{
       color: #ffffff;
       font-size: 40px;
       margin-top: 20px;
   }

   #Login{
       padding-left: 20px;
       padding-right: 20px;
       padding-top: 10px;
       padding-bottom: 10px;
       text-align: center;
       background-color: #0095f0;
       display: inline-block;
       border: none;
       color: #ffffff;
       font-weight: bold;
       border-radius: 4px;
       size: 15px;   
   }
 </style>
</head>
<body>
 <form action="oof">
  <button id="Login" >
    Login
  </button>
 </form>
 <h1 align="center">Hello<br /> Welcome!</h1>
 <img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
      width="100%" height="100%" size=">
</body>

标签： htmlcss

你想把按钮放在哪里？您可以在按钮 css 中尝试：

position: absolute; 
top: 20px; 
right: 20px;

还可以查看这篇关于位置的 css-tricks 文章

html - 在不影响标题文本的情况下无法移动按钮

问题描述

解决方案

推荐阅读