Question

我有这个由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>

Answer 1

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

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

另请查看此css-tricks article on position

Answer 2

绝对的使用定义了元素在文档中的定位方式。你可以左右使用各自的位置

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;
       position: relative;
   }

   h1{
       color: #ffffff;
       font-size: 40px;
       margin-top: 20px;
   }

   #Login{
       position: absolute;
       padding: 10px 20px;
       text-align: center;
       background-color: #0095f0;
       display: inline-block;
       border: none;
       color: #ffffff;
       font-weight: bold;
       border-radius: 4px;
       size: 15px;   
       left: 50px
   }

 

<form action="#">
  <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=">

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

2 个答案: