網頁

▼

2017/11/15

CSS <input>寬度不超過<div>

如果要讓<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>的範圍。

沒有留言:

張貼留言