如何制作上面那樣的盒子？在沒(méi)有 boostrap 的純 css 中為什么我問(wèn)這個(gè)是因?yàn)槲也皇褂?bootstrap 4 并且找不到任何方法將它與 boostrap 3 一起使用，我試圖制作一個(gè)，但它的盒子變得像一列向下這是我的CSS：.currency { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; float:left; border: 2px solid;}和我的html<div> <label class="currency"></label> <input type="text"> 1000</div>
2 回答
明月笑刀無(wú)情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
包裝器可以是一個(gè)label元素，貨幣符號(hào)可以是::before偽元素，它可以讀取data-*標(biāo)簽本身的屬性。
label {
border: 2px #ccc solid;
border-radius: .5em;
display: inline-flex;
color: #666;
overflow: hidden;
font: 2rem Verdana;
}
label:before {
content: attr(data-currency);
width: 2.5em;
padding: .5em 0;
background: #e6e6e8;
text-align: center;
font: inherit;
border-right: inherit;
}
input {
border: 0;
padding: .25em .75em;
font: inherit;
color: inherit;
}
<label aria-label="Enter the amount in €" data-currency="€">
<input type="text" />
</label>
眼眸繁星
TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
這段代碼使用 bootstrap 3 所以如果你愿意的話可以嘗試一下
- 2 回答
- 0 關(guān)注
- 192 瀏覽
添加回答
舉報(bào)
0/150
提交
取消