首先，生成輸入框：
- 代碼：
- 結(jié)果：
設置基本樣式
包括：去除邊距、設置父盒子的寬度(如果不設置寬度，會使用整個瀏覽器的寬度）、添加父盒子邊框等
- 代碼：
*{
margin: 0;
padding: 0;
}
#main{
width: 250px;
border: 1px solid #dcdcdc;
}
- 結(jié)果：
設置2個label標簽的樣式
- code：
#main label{
flex:1;
background-color: #f5f5f5;
font-family: "楷體";
text-align: center; /* 文本居中*/
}
flex:1： 即按照1：1的比例對剩余的空間進行放大或者縮小
- 結(jié)果：
調(diào)整第二個label標簽的樣式
由于前面設置label標簽為flex布局，因此對第二個label標簽進一步設置也只能用flex布局（注意選中的是第三個元素）
文章來源：http://www.zghlxwxcb.cn/news/detail-406905.html
去除文本框的邊框
點擊文本框前：
點擊文本框后，文本框內(nèi)容框會有加粗的外框：
如果不想要，可以添加代碼去掉：
文章來源地址http://www.zghlxwxcb.cn/news/detail-406905.html
到了這里，關(guān)于flex布局：輸入框布局demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
