Как растягивать пункты меню (справа налево) - HTML и CSS

Question

Как растягивать пункты меню (справа налево) - HTML и CSS

Я пытаюсь создать фиксированное меню. Когда я делаю наведение на элемент, все мои 3 элемента перемещаются справа налево. Я не знаю почему. Я не ожидаю, что он будет двигаться. Все, что мне нужно, это один элемент растягивается (справа налево), когда я делаю наведение на него.

HTML-код:

<div class="cs-menu">

    <div class="item">one</div>

    <div class="item">two</div>

    <div class="item">three</div

</div>

CSS код:

.cs-menu {

  position: fixed;

  top: 35%;

  right:10%;

}



.cs-menu .item {

  border: 1px solid red;

  width: 40px;

  height: 40px;

  background: #f9f397;

  transition: width 1s;

 }



 .cs-menu .item:hover {

   width: 150px;

 }

Вот моя демонстрация:
https://jsfiddle.net/rq9vudfd/5/

Я не понимаю, как предметы движутся вместе. Надеюсь, вы мне поможете.
Большое спасибо.

619 4

html css

4 ответов:

Comments

Ничего не найдено.

Mohammad Usman · Accepted Answer · 2016-07-22 17:57:59

По умолчанию все элементы располагаются сверху вниз и слева направо в окне браузера.

Когда вы увеличиваете ширину одного .item, это приведет к увеличению родительской ширины. И поскольку элементы рисуются слева направо, то все ваши элементы .item также будут перемещены влево.

Метод 1: добавить margin: 0 0 0 auto; к .item.
.cs-menu {
  position: fixed;
  top: 35%;
  right:10%;
}

.cs-menu .item {
  margin: 0 0 0 auto;
  border: 1px solid red;
  width: 40px;
  height: 40px;
  background: #f9f397;
  transition: width 1s;
}

.cs-menu .item:hover {
  width: 150px;
}
<div class="cs-menu">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
</div>
Метод 2: добавьте свойства float: right и clear: both css в .item.
.cs-menu {
  position: fixed;
  top: 35%;
  right:10%;
}

.cs-menu .item {
  border: 1px solid red;
  float: right;
  clear: both;
  width: 40px;
  height: 40px;
  background: #f9f397;
  transition: width 1s;
}

.cs-menu .item:hover {
  width: 150px;
}
<div class="cs-menu">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
</div>

Massimiliano Carosi · Accepted Answer · 2016-07-22 18:01:00

Просто используйте float right. Раздвоенный здесь .
.cs-menu .item {
    border: 1px solid red;
    width: 40px;
    height: 40px;
    background: #f9f397;
  transition: width 1s;
  float: right;
  clear: right; 
}
Дело в том, что div, содержащий элементы, изменяет свою ширину на самый большой дочерний элемент. Смотрите эту скрипку, чтобы понять это. Предложенное решение-всего лишь возможность. Просто отведите детей куда-нибудь направо.

Andrea Radice · Accepted Answer · 2016-07-22 17:56:26

Вы можете попробовать использовать следующий CSS

.cs-menu {
  position: fixed;
  top: 35%;
  right:10%;
  **width: 40px;**
}

.cs-menu .item {
  border: 1px solid red;
  width: 40px;
  height: 40px;
  background: #f9f397;
  transition: width 1s;
  **float:right;**
 }

 .cs-menu .item:hover {
   width: 150px;
 }

zsawaf · Accepted Answer · 2016-07-22 18:04:14

Это взорвет ваш разум. FLEXBOX!! две строки кода.

.cs-menu {
  display: flex;
  justify-content: space-between; /*Or space-around*/
}

<div class="cs-menu">
    <div class="item">one</div>
    <div class="item">two</div>
    <div class="item">three</div>
</div>