怎么把文字和輸入框弄到同一行
3 回答
慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
1、你這個(gè)圖片太小了。根本看不清代碼。
2、正好我也在用bootstrap這個(gè)表單樣式。
3、一行，也就是一個(gè)label里面有兩個(gè)東西，一個(gè)是span標(biāo)簽，就是文字這塊。一個(gè)是input標(biāo)簽也就是一個(gè)控件。這兩個(gè)家伙加在一起的寬度不能超過(guò)100%。而且文字這塊也不能超過(guò)本身百分比要不撐格之后會(huì)造成你這種現(xiàn)象。
.basic-grey label>span {
float: left;
font-weight: 500;
font-size: 14px;
width: 30%; //就是這里。最好30%或者以上。你可以先設(shè)定個(gè)50%。然后慢慢調(diào)整。
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: black;
}
下面是type為text的控件。其width我設(shè)置60%。這樣會(huì)有一些留白。比較好看。
.basic-grey input[type="text"] {
border: 1px solid #CFCFCF;
color: #4F4F4F;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 60%; //就是這里。
font-size: 14px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
當(dāng)年話下
TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
嗶嗶one
TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> |
- 3 回答
- 0 關(guān)注
- 2796 瀏覽
添加回答
舉報(bào)
0/150
提交
取消