停止輸入突破容器

我想在我的表單上有一些預輸入，我希望輸入字段擴展到容器div的末尾。問題是由於預輸入文本的長度，輸入字段似乎擴大了容器格。停止輸入突破容器

.container { 
 
    width: 70%; 
 
} 
 
.input-field { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: bottom; 
 
    background: #fff; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    min-width: 16px; 
 
    border: 1px solid #ddd; 
 
} 
 
.input-field .addon { 
 
    padding-left: 8px; 
 
    padding-right: 8px; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 #fff; 
 
    background: #f0f0f0; 
 
} 
 
.input-field input { 
 
    padding-left: 5px; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: transparent; 
 
    resize: none; 
 
    width: 100%; 
 
} 
 
.input-field:hover { 
 
    border: 1px solid #05c9f0; 
 
}

<div class="container"> 
 
    <div class="input-field"> 
 
    <span class="addon">some preinput</span> 
 
    <input id="" type="text" name="" value="test text" /> 
 
    </div> 
 
</div>

這裏又如：http://codepen.io/anon/pen/wgdErO

如果您嘗試示例代碼，你會注意到你可以點擊之外，我希望它結束的輸入框的方式。

有關修復的任何想法？

來源

2017-01-22 NaughtySquid

嘗試。

.container { 
 
    width: 300px; 
 
} 
 
.input-field { 
 
    background: #fff; 
 
    border: 1px solid #ddd; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.input-field .addon { 
 
    padding: 2px 8px; 
 
    text-shadow: 0 1px 0 #fff; 
 
    background: #f0f0f0; 
 
} 
 
.input-field input { 
 
    padding: 0 4px; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: transparent; 
 
    resize: none; 
 
    flex: 1; 
 
} 
 
.input-field:hover { 
 
    border: 1px solid #05c9f0; 
 
}

<div class="container"> 
 
    <div class="input-field"> 
 
    <span class="addon">some preinput</span> 
 
    <input id="" type="text" name="" value="test text" /> 
 
    </div> 
 
</div> 
 
<img src="//dummyimage.com/300x50">

來源

2017-01-22 21:51:57 Stickers

不怕，因爲它不是填充，而是跨度內容的大小。 – NaughtySquid

@NaughtySquid與Flexbox的做法上述更新。 – Stickers

Oooo閃亮，完美修復！非常感謝！ – NaughtySquid

剛剛從100％減少輸入寬度爲較低的值像99.7％，並且將這樣的伎倆：

.container { 
 
    width: 70%; 
 
    border: 1px solid red; 
 
} 
 
.input-field { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: bottom; 
 
\t background: #fff; 
 
\t position: relative; 
 
\t vertical-align: middle; 
 
\t width: 99.7%; 
 
\t min-width: 16px; 
 
\t border: 1px solid #ddd; 
 
} 
 
.input-field .addon { 
 
\t padding-left: 8px; 
 
\t padding-right: 8px; 
 
\t padding-top: 2px; 
 
\t padding-bottom: 2px; 
 
\t text-align: center; 
 
\t text-shadow: 0 1px 0 #fff; 
 
\t background: #f0f0f0; 
 
} 
 
.input-field input { 
 
    padding-left: 5px; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: transparent; 
 
    resize: none; 
 
    width: 100%; 
 
} 
 
.input-field:hover {border: 1px solid #05c9f0;}

<div class="container"> 
 
    <div class="input-field"> 
 
    <span class="addon">some preinput</span> 
 
    <input id="" type="text" name="" value="test text" /> 
 
    </div> 
 
</div>

來源

2017-01-22 21:46:34 Yaser

儘管這個問題肯定是由於輸入是母公司100％的'width'（其中也涵蓋了跨度的寬度），這將遺憾的是仍然有響應的問題。 –

這並沒有解決這個問題。我仍然可以在盒子外面選擇它。 – NaughtySquid

那裏有很多弱點的存在，但問題是關於一個不同的問題@ObsidianAge – Yaser

可以計算這樣的寬度！ width: calc(100% - 125px);而不是使用Flexbox的佈局將其設置爲100％

來源

2017-01-22 21:48:52 spoonscen

爲什麼125px？預先輸入將始終是不同的長度。 – NaughtySquid

停止輸入突破容器

回答

相關問題