メニューのアイテムを伸ばす方法（右から左） - HTMLとCSS

Question

固定メニューを作成しようとしています。アイテムにカーソルを合わせると、3つのアイテムすべてが右から左に移動します。どうしてか分かりません。私はそれが動く方法を期待していません。私が必要とするのは、ホバリングしたときに（右から左に）1つのアイテムが伸びることだけです。

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：.itemにfloat: rightとclear: both CSSプロパティを追加します。

.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

だけフロート権を使用しています。フォークドhere。

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

重要な点は、アイテムを含むdivが最も大きな子にその幅を変更することです。それを理解するにはthis fiddleを参照してください。提案されたソリューションは単なる可能性に過ぎません。ちょうど右の子供たちを取る。

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 !! 2行のコード。

.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>