Question

我正在尝试在自制滑块的背景中制作垂直分割器（如此处http://theymakeapps.com/users/add）。怎么做？这是我到目前为止所做的：

<div id="wrapper">
    <div id="dragger">
        <div class="rect"></div>
        <div class="arrow-down"></div>
    </div>
    <div id="slide-container"></div>
</div>
<br />
<span class="drag-caption active" id="hi-caption">Hi, bot</span>  <span class="drag-caption" id="keep-caption">Keep sliding...</span>  <span class="drag-caption" id="submit-caption">Submit</span>

我的css

* {
    font-family: calibri
}
#dragger {
    width: 10px;
    padding: 5px 10px 5px 5px;
}
.rect {
    background-color: #ccc;
    height: 15px;
    width: 10px;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
}
#wrapper {
    z-index: 55;
    width: 200px;
    padding: 0 10px;
}
#slide-container {
    background: #dedede;
    height:2px;
    border-radius: 1px;
    margin-top:-18px;
}
.drag-caption {
    padding-right: 20px;
    color: #d4d4d4;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -ms-transition: color 500ms ease;
    -o-transition: color 500ms ease;
    transition: color 500ms ease;
}
.drag-caption.active {
    color: black;
}
#submit-caption{
    font-weight: bold;
}

这是jsfiddle。我希望我的separtors在标题和背景栏上对齐。

像这样：

---|---------|------------|
   |         |            |
  Hi bot  Keep sliding  Submit

Answer 1

我添加了div和两个span元素，并使用CSS定位将分隔符放在范围内。

Demo

Demo 2 （如果您不需要最后一个）

Demo 3 （根据您的具体要求）

在这里，我使用CSS Positioning将每个分隔符放在范围栏上，你可以根据你的要求调整左边和权限。

<div id="slide-container"></div>
<div class="separators"><span></span><span></span></div> <!-- Add this after #slide-container -->

.separators {
    position: relative;
}

.separators > span:before,
.separators > span:after{
    content: "|";
    position: absolute;
    z-index: -1;
    color: #DEDEDE;
}

.separators > span:nth-of-type(1):before {
    left: 50px;
    top: -12px;
}

.separators > span:nth-of-type(1):after {
    left: 100px;
    top: -12px;
}

.separators > span:nth-of-type(2):before {
    left: 150px;
    top: -12px;
}

.separators > span:nth-of-type(2):after {
    left: 200px;
    top: -12px;
}

在背景中使用纯css3制作垂直分割器

1 个答案: