2个输入用斜线分开

有人可以帮助我实现这2个输入看起来像一个用斜线分开还与做Twitter的引导2个输入用斜线分开

我得到了这么远，但有也分我觉得他们应该重叠（与输入斜杠）

<input class="form-control" type="text" name="kerkim" id="input_main"> 
<i id="slash">/</i> 
<div class="input-group">       
<input id="address" class="form-control" type="text" > 
<div class="input-group-btn"> 
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button> 
</div> 
</div>

来源

2015-06-20 kg_root

http://codepen.io/oroborus357/pen/doVKEP这里的快速codepen我为你做的，它务必做好你所需要的:)

<span class="first"><input type="text" /></span><input class="second" type="text" /> 

body { 
    padding: 50px; 
    background: #333; 
} 
* { 
    box-sizing: border-box; 
} 
input { 
    background: white; 
    border: none; 
    padding-left: 15px; 
} 

.first { 
    position: relative; 
} 
.first:before { 
    content: "/"; 
    position: absolute; 
    left: 100%; 
    top: 0; 
    height: 100%; 
    transform: translateX(-50%); 
    font-size: 18px; 
}

来源

2015-06-20 17:16:54

感谢，但反正是有自举和覆盖干什么呢？ –

Ofcourse ... Bootstrap只是一个更快，更容易开发重复内容的框架..（一组html/css元素）...你是什么意思的“覆盖”？ –

我的意思是一个元素超过另一个背景色的想法！做出输入并在其上放上斜杠 –

许多方法...这里有两个。

鉴于这个网站：

<div class="container"> 
     <input type="text"> 
     <span class="slash"></span> 
     <input type="text"> 
    </div>

有了这个CSS：

.container{ 
    border: 1px solid #999; 
    display: inline-block; 
    border-radius: 3px; 
    background: #fff; 
    margin-top: 50px; 
    position: relative; 
} 

.container input{ 
    border: none; 
    background: none; 
} 

.slash{ 
    transform: scale(3); 
    position: absolute; 
} 
/* or.... */ 
.slash{ 
    width: 2px; 
    height: 28px; 
    background: #999; 
    transform: rotate(20deg); 
    position: relative; 
    display: inline-block; 
    position: absolute; 
    top: -5px; 
}

的演示here

来源

2015-06-20 17:20:39 Nobita

2个输入用斜线分开

回答

相关问题