javascript - div之间的中心垂直线

Question

我有一个名为 welcome-inputs 的 div，在另外两个 left 和 right 中

名为 left 的 div 需要位于 welcome-inputs 的左侧，名为 right 的 div 位于 welcome 的右侧- 输入。

左边和右边的宽度 = 100px

需要一条线位于两者的中间，表示分离。

查看代码:http://jsfiddle.net/gn1asdmh/3/

红线必须在图片中间(图片代表左右)

Answer 1

jsFiddle demo

在.left和.right之间添加一个span元素>

<span class="middleLine"></span>

CSS:

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    text-align:center; /* ADD THIS */
}
.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}
.left {
    float: left;
    /*border-right: 3px solid red; REMOVE THIS */
}
.right {
    float: right;
}
body {
    background:blue;
}

span.middleLine{
   display:inline-block;
   border-right: 2px solid red;
   margin-left:-1px; /* cause the border is 2px */
    height:100%;
}