Question

有人可以帮助我实现2个输出看起来像斜线划分的那个也可以使用twitter-bootstrap

我到目前为止所得到的还有分歧，我认为它们应该重叠（与输入斜线）

<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>

Answer 1

http://codepen.io/oroborus357/pen/doVKEP以下是我为您制作的快速编写代码，它可以满足您的需求：）

df1 <- structure(list(tag = c("tag1", "tag1", "tag1", "tag1", "tag2", 
"tag2", "tag2"), day = c("day1", "day2", "day3", "dayn", "day1", 
"day2", "day3"), Amount = c(400L, 200L, 0L, 0L, 0L, 100L, 0L)),
.Names = c("tag", 
"day", "Amount"), class = "data.frame", row.names = c(NA, -7L))

Answer 2

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

鉴于此html：

  <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

2输入除以斜线

2 个答案: