如何限制位置内的flex-grow div：相对div？

我想创建一个基本滑块div，我得到了结构。如何限制位置内的flex-grow div：相对div？

我父母div与slider类三个孩子div称为Button1的buttpn2和范围，我想按钮display: relative这样，当我使用left或right财产上的按钮应该移动。

我意识到它是position: relative，但如何使所需的滑块效果？

.slider { 
 
    width: 300px; 
 
    height: 5px; 
 
    background-color: #a0a0a0; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.slider div { 
 
    display: inline-block; 
 
} 
 

 
.button { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 5px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#button1 { 
 
    left: 25px; 
 
} 
 

 
#button2 { 
 
    right: 50px; 
 
} 
 

 
.button:hover { 
 
    cursor: pointer; 
 
} 
 

 
.range { 
 
    flex-grow: 2; 
 
    height: 5px; 
 
    background-color: blue; 
 
}

<div class="slider"> 
 
    <div class="button" id="button1"></div> 
 
    <div class="range"></div> 
 
    <div class="button" id="button2"></div> 
 
</div>

来源

2017-08-03 Rahul

设置的位置是：相对于上内含div，而不是按钮。设置按钮的位置：绝对;

.slider{ 
 
    width:300px; 
 
    height:5px; 
 
    background-color:#a0a0a0; 
 
    display:flex; 
 
    align-items:center; 
 
    position: relative; 
 
} 
 
.slider div{ 
 
    display: inline-block; 
 
} 
 
.button{ 
 
    width:10px; 
 
    height:10px; 
 
    border-radius:5px; 
 
    background-color:red; 
 
    position: absolute; 
 
} 
 
#button1{ 
 
    left:25px; 
 
} 
 
#button2{ 
 
    right:50px; 
 
} 
 
.button:hover{ 
 
    cursor:pointer; 
 
} 
 
.range{ 
 
    flex-grow:2; 
 
    height:5px; 
 
    background-color:blue; 
 
}

<body> 
 
    <div class="slider"> 
 
    <div class="button" id="button1"></div> 
 
    <div class="range"></div> 
 
    <div class="button" id="button2"></div> 
 
    </div> 
 
</body>

来源

2017-08-03 18:02:11 James

蓝色部分应该是红色的按钮之间！ – Rahul

我只是试图帮助你的问题，而不是为你做所有的工作！ – James

如何限制位置内的flex-grow div：相对div？

回答

相关问题