跨度，输入，跨度100％宽度CSS问题

Question

这就是我现在正在做的事情。我在设计中使用了LESS CSS。我需要在指定的输入之间放置2个跨度。所有元素都应该是100％宽度。跨度应始终为20px宽度，输入宽度可根据屏幕宽度而变化。任何人都可以帮助我吗？

跨度宽度：20px;

<div class="wrapper">
 <span class="span-one">span</span>
 <input type="text" class="input">
 <span class="span-two">span</span>
</div>

Answer 1

您可以通过绝对定位实现这一目标。它将跨越流量并将它们放在输入的顶部。您还应该将输入放在div中来执行此操作，因为当display：block set on时，它自然不会达到100％的宽度。

HTML

<div class="wrapper">
 <span class="span-one">span</span>
 <div class="input"><input type="text" class="input"></div>
 <span class="span-two">span</span>
</div>

CSS

.wrapper { position: relative; }

div.input { margin: 0 20px; }

input { 
    width: 100%;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; }

span.span-one {
  position: absolute;
  width:20px; height:20px;
  left:0; top:0;
  background-color: red; }

span.span-two {
  position: absolute;
  width:20px; height:20px;
  right:0; top:0;
  background-color: red; }

这是小提琴：http://jsfiddle.net/ywUeu/1/

当然，跨度中的'span'一词长度超过20px，因此它超出了范围。 可能最好在输入时添加'box-sizing'来输入。

Answer 2

定位不理想，但您已经批准了答案......这是一个FYI ....

而不是定位使用：display: table-cell;

http://jsfiddle.net/Riskbreaker/CBC5A/1/

Answer 3

使用您的HTML：

.wrapper, .text {
  width: 100%;
}
.wrapper > span {
  display: inline-block;
  width: 20px;
}
.wrapper.input {
  width: calc(100% - 40px);
}

更好的方式：

<div class="wrapper">
  <div class="input"><input type="text" class="text-input"></div>
</div>

CSS：

/*
.wrapper, .input{ width is 100% by default }
*/
.text-input{
  margin: 0 20px;
  width: calc(100% - 40px);
}