如果要讓<input>欄位的寬度不要超過外層的<div>的話，可用css將<input>的width設定為百分比
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width:100%;
background-color:lightblue;
}
#wrapper {
width:50%;
background: lightgray;
padding:10px;
}
/* 下面的css使input的寬度不會超過div */
td > input {
width:100%;
box-sizing:border-box; /* 使元素的寬度包括padding margin, border*/
-moz-box-sizing:border-box;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<tbody>
<tr>
<td width="30%">12345</td>
<td width="50%"><input type="text" size="100"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
See the Pen input 寬度不超過div by 菜鳥工程師 (@bronx0807) on CodePen.
如果把上面CSS中td > input的部分拿掉，則<input>欄位的寬度會超過<div>的範圍。
沒有留言:
張貼留言