html - 跨度，输入，跨度 100% 宽度 CSS 问题

Question

这就是我现在正在做的事情。我在设计中使用 LESS CSS。我需要在指定的输入之间放置 2 个跨度。所有元素都应为 100% 宽度。spans 应始终为 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 时它不会自然获得 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/

当然，跨度中的“跨度”一词比 20px 长，因此它超出了跨度。正如我所做的那样，最好将“box-sizing”添加到输入中。

Answer 2

定位并不理想，但您已经批准了答案……这是仅供参考……

而不是定位使用：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);
}