Блог

Главная - Вопросы по программированию - Как разместить фиксированную кнопку в правом верхнем углу в HTML

Как разместить фиксированную кнопку в правом верхнем углу в HTML

#html #css

Вопрос:

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

 <head>      
  <style>
      .myButton {
      padding: 0px;
      display:block;
      float:right;
      background-color: green;
      color: white;
      text-align:center;
    }

    </style>
    <a href="Login Page.html" class="myButton">Username</a>
    <h1 style="font-size:50px;">Leaderboard</h1>
</head>

Комментарии:

1.Добавить h1 float:left к.

Ответ №1:

 .myButton {
      padding: 0px;
      display:block;
      position:fixed;
      top:2x;
      right:0px;
      background-color: green;
      color: white;
      text-align:center;
    }

измените верхние и правые свойства для настройки.

Комментарии:

1. Используя это и установив значение 0 пикселей вместо 2 пикселей, я получил именно то, что хотел, спасибо.

2. хорошая работа. добро пожаловать 🙂

Ответ №2:

HTML:

 <a href="Login Page.html" class="myButton fixed to-top-right">Username</a>

CSS:

 .myButton {
  padding: 0px;
  background-color: green;
  color: white;
  text-align:center;
}

.fixed {
    display: fixed;
}

.fixed.to-top-right {
    left: unset;
    right: 0;
    top: 0;
    bottom: unset;
}

Ответ №3:

Лучший способ выровнять объект в css без использования фиксированной или абсолютной позиции-использовать diplay flex

Обратите внимание, что это не исправлено

 header{
    display: flex;
    width: 100%;
    }
header a{
    margin-left: auto;
    } 
 <header>
    <a href="#">btn</a>
</header>

Это исправлено

   header a{
    position: fixed;
    top:0;
    right: 0;
    padding: 5px;
} 
 <header>
    <a href="#">btn</a>
</header>
Метки: