Кнопка не может быть перемещена без воздействия на текст заголовка - PullRequest
Новая
       0

Кнопка не может быть перемещена без воздействия на текст заголовка

0 голосов
/ 12 мая 2018

У меня есть страница входа, созданная из 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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Использование абсолютного определяет, как элемент позиционируется в документе. Вы можете использовать влево и вправо для их соответствующей позиции 

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=">
0 голосов
/ 12 мая 2018

Куда бы вы хотели поместить кнопку?Вы можете попробовать в кнопке css: 

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

Также взгляните на эту статью css-tricks о позиции

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...