html - 如何拉伸(stretch)菜单中的元素(从右到左)- HTML 和 CSS

Question

我正在尝试创建一个固定菜单。当我将鼠标悬停在某个元素上时，我所有的 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/

我不明白这些元素是如何一起移动的。我希望你可以帮助我。非常感谢。

Answer 1

默认情况下，所有元素在浏览器窗口中都是从上到下、从左到右放置的。

当您增加一个.item 的宽度时，它也会导致父级宽度的增加。由于元素是从左到右绘制的，因此所有 .item 元素也将移动到左侧。

方法一:将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>