如何拉伸菜单中的项目(从右到左)-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元素也将向左移动。

方法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>

Answer 2

只需使用float right。分叉在这里。

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

关键是，包含项的div将其宽度更改为最大的子项。看看这把小提琴就明白了。所提出的解决方案只是一种可能性。只要带孩子们走正确的路就行了。

Answer 3

您可以尝试使用以下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;
 }

Answer 4

这会让你大吃一惊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>