Элементы неупорядоченного списка перемещаются вправо примерно на 5 пикселей при наведении курсора мыши на один из элементов (например, «Дом» или «Контакт»). - PullRequest
Новая
       0

Элементы неупорядоченного списка перемещаются вправо примерно на 5 пикселей при наведении курсора мыши на один из элементов (например, «Дом» или «Контакт»).

1 голос
/ 06 апреля 2020

Итак, у меня возникла эта проблема, когда я наложил курсор мыши на один из элементов неупорядоченного списка, все остальные элементы справа от этого элемента переместились примерно на 5 пикселей вправо.
Я новичок в HTML и CSS, поэтому я столкнулся с этим препятствием ...
Есть ли способ решить эту проблему? Также я добавляю " ul li a: hover " , чтобы шрифт увеличивался на 110% , тогда как в других ситуациях, например, когда я ставлю только " opacity"on" ul li a: hover"ничего из вышеперечисленного не происходит, элементы не переместятся в правую сторону.

  • Вот мой HTML: 

body {
  margin: 0px;
  padding: 0px;
  background-attachment: fixed;
  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}

header {
  margin: 0px;
  padding: 0px;
}

.hhh {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 40px;
  left: 8%;
  top: 4%;
}

.hhh a {
  text-decoration: none;
}

.hhh a:active {
  color: black;
}

.hhh a:visited {
  color: black;
}

.hhh a:hover {
  color: black;
  opacity: 0.8;
  font-size: 110%;
}

.hhh a:link {
  color: black;
}

.gm {
  position: absolute;
  display: flex;
  left: 55%;
  top: 7%;
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
}

.gm li {
  margin-left: 35px;
  list-style-type: none;
}

.gm li a {
  text-decoration: none;
}

.gm li a:active {
  color: black;
}

.gm li a:visited {
  color: black;
}

.gm li a:hover {
  color: black;
  font-size: 110%;
  box-sizing: border-box;
}

.gm li a:link {
  color: black;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="Domagoj Šutalo">
  <meta name="description" content="Hello and welcome to my very first responsive website">
  <meta name="keywords" content="Web, Webpage, Portfolio, Responsive">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Responsive webpage | Home</title>
</head>

<body>
  <header>
    <nav>
      <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>
      <ul class="gm">
        <li><a href="#">Home</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>


</html>

Заранее спасибо за все ответы! (PS Извините, если CSS не на 100% хорошо, я только начинаю, ха-ха ...)

1 Ответ

1 голос
/ 06 апреля 2020

Вы можете установить display: block; на .gm li a и использовать transform:scale: 

body {
  margin: 0px;
  padding: 0px;
  background-attachment: fixed;
  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}

header {
  margin: 0px;
  padding: 0px;
}

.hhh {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 40px;
  left: 8%;
  top: 4%;
}

.hhh a {
  text-decoration: none;
}

.hhh a:active {
  color: black;
}

.hhh a:visited {
  color: black;
}

.hhh a:hover {
  color: black;
  opacity: 0.8;
  font-size: 110%;
}

.hhh a:link {
  color: black;
}

.gm {
  position: absolute;
  display: flex;
  left: 55%;
  top: 7%;
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
}

.gm li {
  margin-left: 35px;
  list-style-type: none;
}

.gm li a {
  display: block;
  text-decoration: none;
}

.gm li a:active {
  color: black;
}

.gm li a:hover{  
  transform: scale(1.1);
}
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<header>
  <nav>
    <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>
    <ul class="gm">
      <li><a href="#">Home</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Games</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>

</main>
<footer>

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

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

...