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個輸入用斜線分開

回答

相關問題