最小入力幅Iは左側</p> <ul> <li>ラベル値+右側</li> </ul> <p>上のユニットの</li> <li>入力すべての要素の用途を有するアプリ反応形態を有する値

Question

で成長display：デフォルトでflex。

Iは最小幅30pxを有するように、入力サイズを必要とするが、場合に入力番号が長く（すなわち8桁）であり、Iは、彼の最大幅80pxにストレッチ自体までの入力を必要とします依然として右側に整列している。

<div class="formRow formRowEven"> 
    <div class="label">Long value</div> 
    <div class="valueWrapper"> 
     <div class="value"> 
     <input value="12345678"/> 
     </div> 
     <div class="unit">min</div> 
    </div> 
    </div> 

CSS：

.formRow { 
    display: flex; 
    flex-direction: row; 
    flex: 1 1; 
} 

.label { 
    flex: 1 1; 
} 
.valueWrapper { 
    display: flex; 
    flex-direction: row; 
} 

.value { 
    display: flex; 
    margin-right: 5px; 
    min-width: 0; 
    max-width: 80px; 
    display: flex; 
    justify-content: flex-end; 
} 

input { 
    color: #fff; 
    min-width: 0; 
    display: flex; 
    flex: 1 0 30px; 
    border-width: 0 0 1px; 
    border-color: #ccc; 
    border-style: solid; 
} 

そして、ここでは、理想的な状態の画像である。ここ

は、フォームの行の https://codepen.io/anon/pen/MrweLQ

HTMLのフィドルです。

私は誰が助けて、入力/ユニットの左側の設定を把握することはできませんか？

Answer 1

は、HTMLで<input />をインライン表示のために設計されていない、と述べました。修正codepen https://codepen.io/valuis/pen/LeVrbx

やコードスニペットとcontentEditable="true"と

使用<span />、：

@import url(//fonts.googleapis.com/css?family=Roboto:400,300); 
 
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
html { 
 
    font-size: 17px; 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: #111; 
 
    font-family: 'Roboto'; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
.wrapper { 
 
    background: #48435C; 
 
    margin: 2rem auto 0; 
 
    max-width: 80%; 
 
    color: #fff; 
 
    border: 1px solid #ddd; 
 
    padding: 20px 0; 
 
} 
 

 
h1 { 
 
    padding: 0 30px; 
 
} 
 

 
.formRow { 
 
    padding: 10px 30px; 
 
} 
 

 
.formRowOdd { 
 
    background: #383850; 
 
} 
 

 
/* LAYOUT */ 
 
.formRow { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1 1; 
 
} 
 

 
.label { 
 
    display: flex; 
 
    flex: 1 1; 
 
} 
 
.valueWrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.value { 
 
    display: flex; 
 
    margin-right: 5px; 
 
    min-width: 0; 
 
    max-width: 80px; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
span { 
 
    display: flex; 
 
    color: #fff; 
 
    background: transparent; 
 
    text-align: right; 
 
    min-width: 0; 
 
    overflow: hidden; 
 
    max-width: 80px; 
 
    flex: 1 0 30px; 
 
    border-width: 0 0 1px; 
 
    border-color: #ccc; 
 
    border-style: solid; 
 
}

<div class="wrapper"> 
 
    <h1>Form</h1> 
 
    <div class="formRow formRowOdd"> 
 
    <div class="label">Short value</div> 
 
    <div class="valueWrapper"> 
 
     <div class="value"> 
 
     <span contentEditable="true">123</span> 
 
     </div> 
 
     <div class="unit">min</div> 
 
    </div> 
 
    </div> 
 
    <div class="formRow formRowEven"> 
 
    <div class="label">Long value</div> 
 
    <div class="valueWrapper"> 
 
     <div class="value"> 
 
     <span contentEditable="true">1234567</span> 
 
     </div> 
 
     <div class="unit">min</div> 
 
    </div> 
 
    </div> 
 
    <div class="formRow formRowOdd"> 
 
    <div class="label">Value to be filled</div> 
 
    <div class="valueWrapper"> 
 
     <div class="value"> 
 
     <span contentEditable="true" /> 
 
     </div> 
 
     <div class="unit">min</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

入力の代わりに編集可能なコンテンツを持つdivを使用することができます。入力するときにdivを展開することができます。 次に、テキストを非表示の入力にプッシュします。

このような何か：@DanFarrellとして

var fakeInput = document.getElementById('yourFakeInput'); 
 
    var Inputelement = document.getElementById('theRealInput'); 
 
     
 
     fakeInput.onblur = function() { 
 
      Inputelement.value = fakeInput.innerHTML; 
 
      console.log(fakeInput.clientWidth + 'px'); 
 
}

div { 
 
     width: auto; 
 
     display: inline-block; 
 
    }

<div id='yourFakeInput' contenteditable="true">type here...</div> 
 
    <input id='theRealInput' type='hidden'>