Span, Input, Span Ширина 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, чтобы сделать это, поскольку он естественно не получает 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, так что выходит из диапазона , Лучше всего добавить «размер окна» для ввода, как и я.

Answer 2

С вашей 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); 
} 

Answer 3

позиционирования не является идеальным но вы уже одобрил ответ ... это является FYI ....

Вместо использования позиционирующего: display: table-cell;

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