第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何使用 css flexbox 在文本輸入中創(chuàng)建一個(gè)按鈕？

如何使用 css flexbox 在文本輸入中創(chuàng)建一個(gè)按鈕？

慕碼人2483693 2023-04-27 16:10:26
我正在嘗試使用按鈕創(chuàng)建一個(gè)簡(jiǎn)單的輸入文本。但我想要輸入框內(nèi)的按鈕。我正在使用 CSS flexbox。下面是代碼<style>    .container{        display: flex;        width: 500px;        justify-content: center;        align-items: center;        margin: 0 auto;    }    input{        height: 60px;        width: 320px;        background-color: #fce6ef;        border-radius: 50px;        border: 1px solid #ffc5dd;    }    button{        height: 54px;        width: 94px;        background-color: #ff0266;        color: #ffffff;        text-transform: uppercase;        border-style: none;        border-radius: 50px;    }    </style>        <body>        <div class="container">            <input type="text">            <button>Submit</button>        </div>    </body>附上圖片以便更好地理解：
查看完整描述

5 回答

?
瀟瀟雨雨

TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊

因?yàn)樗?container已經(jīng)是一個(gè)顯示設(shè)置為 flex 的元素。您可以將所有 It 子項(xiàng)對(duì)齊在同一行上，并將輸入字段設(shè)置為增長(zhǎng)并占用容器內(nèi)的所有空間。


之后，您可以將背景顏色應(yīng)用于容器而不是將其應(yīng)用于輸入字段。


.container{

    display: flex;

    width: 500px;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    background-color: #fce6ef;

    border-radius: 50px;

    border: 1px solid #ffc5dd;

    height: 60px;

    padding: 0px 3px 0px 8px;

}


input{

    padding: 4px;

    flex-grow: 1;

    background-color: transparent;

    outline: none;

    border: none;

    margin-right: 8px;

}

button{

    height: 54px;

    width: 94px;

    background-color: #ff0266;

    color: #ffffff;

    text-transform: uppercase;

    border-style: none;

    border-radius: 50px;

}

<div class="container">

    <input type="text">

    <button>Submit</button>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
?
茅侃侃

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個(gè)贊

考慮以下（沒(méi)有positioning）：


.container {

  display: flex;

  width: 500px;

  padding: 4px;

  padding-left: 20px;

  justify-content: center;

  align-items: center;

  margin: auto;

  background-color: #fce6ef;

  border-radius: 50px;

  border: 1px solid #ffc5dd;

}


input {

  width: 100%;

  height: 54px;

  background: none;

  border: 0;

  padding: 0;

  outline: none;

}


button {

  height: 54px;

  width: 94px;

  background-color: #ff0266;

  color: #ffffff;

  text-transform: uppercase;

  border-style: none;

  border-radius: 50px;

  cursor: pointer;

  outline: none;

}

<div class="container">

  <input type="text">

  <button>Submit</button>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
?
至尊寶的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊

您可以通過(guò)設(shè)計(jì)而.container不是input. 然后使input透明，就是這樣：


.container {

  display: flex;

  width: 300px;

  justify-content: center;

  align-items: center;

  padding: 2px;

  background-color: #fce6ef;

  border-radius: 50px;

  border: 1px solid #ffc5dd;

}


input {

  height: 54px;

  font-size: 20px;

  width: 100%;

  background-color: transparent;

  border-radius: 50px 0 0 50px;

  border: none;

  outline: none;

}


button {

  height: 54px;

  width: 94px;

  background-color: #ff0266;

  color: #ffffff;

  text-transform: uppercase;

  border-style: none;

  border-radius: 50px;

}

<div class="container">

  <input type="text">

  <button>Submit</button>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
?
九州編程

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊

你不能在技術(shù)上把它放在輸入里面，但你可以絕對(duì)定位在輸入里面 position: absolute 在按鈕上和 position relative 在容器上。然后將其放置在頂部、左側(cè)、右側(cè)等位置。


<style>

.container{

display: flex;

width: 500px;

justify-content: center;

align-items: center;

margin: 0 auto;

position: relative;

}

input{

height: 60px;

width: 320px;

background-color: #fce6ef;

border-radius: 50px;

border: 1px solid #ffc5dd;

}

button{

height: 54px;

width: 94px;

background-color: #ff0266;

color: #ffffff;

text-transform: uppercase;

border-style: none;

border-radius: 50px;

position: absolute;

}

</style>


<body>

? ? <div class="container">

? ? ? <input type="text" /> <!-- close the input tag -->

? ? ? <button>Submit</button>

? ?</div>

</body>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

試試這個(gè)哥們 希望這是你需要的。我所做的只是使輸入透明，并使外部 div 保持輸入所具有的樣式。


編輯。擺脫了單擊元素時(shí)自然出現(xiàn)的可怕輸入輪廓。


.container{

? ? display: flex;

? ? justify-content: space-between;

? ? width: 500px;

? ? justify-content: center;

? ? align-items: center;

? ? margin: 0 auto;

? ? background-color: #fce6ef;

? ? border-radius: 50px;

? ? border: 1px solid #ffc5dd;

}

input{

? ? height: 58px;

? ? width: 100%;

? ? background-color:#fce6ef;

? ? border-radius: 50px;

? ? border: none;

}

button{

? ? height: 54px;

? ? width: 150px;

? ? background-color: #ff0266;

? ? color: #ffffff;

? ? text-transform: uppercase;

? ? border-style: none;

? ? border-radius: 50px;

}

input:focus {

? outline: none;

}


查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 5 回答
  • 0 關(guān)注
  • 228 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)