Блог

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

Как я могу переместить входящие вправо, не перемещая значок параметров

#html #css

#HTML #css

Вопрос:

Я знаю, что заголовок был не очень хорошим, но в моем верхнем меню у меня есть входящие и опции с 3 вертикальными точками, но когда я перемещаю их оба вправо ( float:right; ), входящие находятся в конце, чего я не хочу, я хочу, чтобы входящие были слева от опций. Вот код

   .notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}



<div id="topnav">
    <a class="active" href="home">Home</a>
    <a id="font2" href="contact.php">Contact Us</a>
    <a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">1</span>
</a>
    <button id="options" style="float:right;"><svg xmlns="http://www.w3.org/2000/svg" width="27" height="25" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg></button>
  </div>

Ответ №1:

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

Самым простым решением может быть изменение порядка, в котором Входящие и кнопки отображаются в HTML-коде. Итак, сначала поместите кнопку, затем она сначала всплывет вправо. Приведенный ниже фрагмент использует метод float с измененным порядком элементов HTML:

 .notification {
  float: right;
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}

#options {
  float: right;
} 
 <div id="topnav">
  <a class="active" href="home">Home</a>
  <a id="font2" href="contact.php">Contact Us</a>
  <button id="options"><svg xmlns="http://www.w3.org/2000/svg" width="27" height="25" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg></button>

  <a href="#" class="notification">
    <span>Inbox</span>
    <span class="badge">1</span>
  </a>
</div>