我有一個主<div>
其中有一個左和右個。
在左側,我有一個<input type = "text">
。調整div內的輸入元素
我的問題是<input>
元素的寬度和高度看起來比左邊的<div>
的容器看起來大。
請幫助我與輸入元素。
我有一個主<div>
其中有一個左和右個。
在左側,我有一個<input type = "text">
。調整div內的輸入元素
我的問題是<input>
元素的寬度和高度看起來比左邊的<div>
的容器看起來大。
請幫助我與輸入元素。
一個土生土長的輸入應用了padding
和border
。
添加到您的input
CSS:
border: 0;
box-sizing: border-box;
的問題是,因爲填充。
在你的CSS只需添加這些樣式:
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
}
這是你在找什麼:
box-sizing: border-box;
所以你的CSS應該是這樣的:
.leftDiv input {
box-sizing: border-box;
}
變化高度的輸入在css
div.wrapper {
width : 200px;
height : 30px;
background-color : red;
}
div.wrapper div.leftDiv {
float: left;
width : 30%;
height: 30px;
background-color : blue;
}
div.wrapper input[type = "text"] {
float: left;
width : 100%;
height: 20px;
}
div.wrapper div.rightDiv {
float: right;
width : 60%;
height: 30px;
background-color : yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class = "wrapper">
<div class ="leftDiv">
<input type = "text" value = "1">
</div>
<div class = "rightDiv">
</div>
</div>
</div>
</body>
</html>
請試試這個:
div.wrapper {
width : 200px;
height : 20px;
background-color : red;
}
div.wrapper div.leftDiv {
float: left;
width : 30%;
height: 20px;
background-color : blue;
}
div.wrapper input[type = "text"] {
float: left;
width : 100%;
height: 20px;
box-sizing:border-box;
}
div.wrapper div.rightDiv {
float: right;
width : 60%;
height: 20px;
background-color : yellow;
}
<div class = "wrapper">
<div class ="leftDiv">
<input type = "text" value = "1">
</div>
<div class = "rightDiv">
</div>
</div>
只要改變高度是我的主意高度
div.wrapper input[type="text"] {
float: left;
width: 100%;
height: 14px;
}