Html滑塊，每邊都有文字

我有一個關於html和css的問題。我正在嘗試使用文本 - 滑塊 - 文本創建div。這是它應該看起來如何的照片。Html滑塊，每邊都有文字

這是我目前的狀況。

我希望有人能幫助我獲得的1號線這個元素。

.information_seperator { 
 
    height: 4vh; 
 
    background-color: #ffffff; 
 
} 
 
.divider { 
 
    width: 50vw; 
 
    background-color: #ffc539; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 
.divider:after { 
 
    content: " "; 
 
    width: 5px; 
 
    height: 5px; 
 
    position: relative; 
 
    top: 0; 
 
    right: 10px; 
 
    background-color: #ffc539; 
 
}

<div class="information_seperator"> 
 
    <!--<div class="row">--> 
 
    <span class="text_info">AMS</span> 
 
    <hr class="divider"> 
 
    <!--<input data-provide="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20"/>--> 
 
    <!--<span style="color: #ffc539">&#9679;</span>--> 
 
    <span>JFC</span> 
 
    <!--</div>--> 
 
</div>

來源

2016-05-15 D.Bronder

也許張貼的CSS/HTML到目前爲止，將有助於我們 –

請在問題代碼做到這一點。 – Keiwan

您可以Flexbox和JQuery UI

$('.circle').draggable({ 
 
    axis: "x", 
 
    containment: ".line" 
 
});

.slider { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.line { 
 
    flex: 1; 
 
    height: 4px; 
 
    background: #FBC538; 
 
    position: relative; 
 
    margin: 0 10px; 
 
} 
 
.circle { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: #FBC538; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -8px; 
 
} 
 
span:not(.circle) { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: Sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div class="slider"> 
 
    <span>AMS</span> 
 
    <div class="line"><span class="circle"></span></div> 
 
    <span>JFC</span> 
 
</div>

來源

2016-05-15 15:07:48

非常感謝你再次！ –

不客氣，你可以在這裏閱讀更多關於'flexbox'的信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes –

我認爲你需要在

display: inline-block

來源

2016-05-15 14:29:16

念起來要對齊元素彼此相鄰使用：display:inline;

例子：

span, 
 
div { 
 
    display: inline; 
 
} 
 
//Slider 
 
input[type=range] { 
 
    -webkit-appearance: none; 
 
    margin: 18px 0; 
 
    width: 100%; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 8.4px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
    background: #3071a9; 
 
    border-radius: 1.3px; 
 
    border: 0.2px solid #010101; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
    border: 1px solid #000000; 
 
    height: 36px; 
 
    width: 16px; 
 
    border-radius: 3px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
    -webkit-appearance: none; 
 
    margin-top: -14px; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: #367ebd; 
 
} 
 
input[type=range]::-moz-range-track { 
 
    width: 100%; 
 
    height: 8.4px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
    background: #3071a9; 
 
    border-radius: 1.3px; 
 
    border: 0.2px solid #010101; 
 
} 
 
input[type=range]::-moz-range-thumb { 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
    border: 1px solid #000000; 
 
    height: 36px; 
 
    width: 16px; 
 
    border-radius: 3px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
input[type=range]::-ms-track { 
 
    width: 100%; 
 
    height: 8.4px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    background: transparent; 
 
    border-color: transparent; 
 
    border-width: 16px 0; 
 
    color: transparent; 
 
} 
 
input[type=range]::-ms-fill-lower { 
 
    background: #2a6495; 
 
    border: 0.2px solid #010101; 
 
    border-radius: 2.6px; 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
    background: #3071a9; 
 
    border: 0.2px solid #010101; 
 
    border-radius: 2.6px; 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
} 
 
input[type=range]::-ms-thumb { 
 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 
    border: 1px solid #000000; 
 
    height: 36px; 
 
    width: 16px; 
 
    border-radius: 3px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
input[type=range]:focus::-ms-fill-lower { 
 
    background: #3071a9; 
 
} 
 
input[type=range]:focus::-ms-fill-upper { 
 
    background: #367ebd; 
 
}

<span>text</span> 
 
<div> 
 
    <input type=range /> 
 
</div> 
 
<span>text</span>

來源

2016-05-15 14:32:29

Html滑塊，每邊都有文字

回答

相關問題