###
设置 HTML `
input` 元素的
CSS 宽度
在网页设计中，
设置 `
input` 元素的
宽度是常见的需求。可以通过多种方式使用
CSS 来控制 `
input` 的
宽度。
#### 1. 固定
宽度
如果希望 `
input` 元素具有固定的
宽度，可以直接使用 `
width` 属性来定义：
```
css
input {
width: 200px;
}
```
这种方法适用于所有
类型的 `
input` 元素，并且可以轻松地在整个网站中保持一致的设计风格[^1]。
#### 2. 百分比
宽度
若想让 `
input` 元素根据其父容器的大小自动调整
宽度，可以使用百分比值：
```
css
input {
width: 100%;
}
```
这种方式可以让 `
input` 元素填充其父容器的全部
宽度。但需要注意的是，如果 `
input` 元素内部有内边距（padding）或边框（border），可能会导致实际
宽度超出父容器。为了解决这个问题，可以添加 `box-sizing: border-box;` 属性：
```
css
input {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
```
这样可以确保 `
input` 元素的总
宽度包括了内容、内边距和边框，不会溢出父容器[^3]。
#### 3. 自适应
宽度
对于需要根据输入内容动态调整
宽度的情况，可以采用一种技巧，即利用一个不可见的 `span` 元素来撑开外部容器，从而使得 `
input` 能够自适应内容的
宽度：
```html
<span class="
input-adaptive-
width">
<span>{{vm.newTag}}</span>
<
input name="newTag" type="text" maxlength="20" ng-model="vm.newTag">
</span>
```
对应的
CSS 如下：
```
css
.
input-adaptive-
width {
display: inline-block;
min-
width: 20px;
max-
width: 200px;
white-space: nowrap;
position: relative;
}
.
input-adaptive-
width span {
display: inline-block;
height: 100%;
background: inherit;
padding: 0;
white-space: nowrap;
opacity: 0;
}
.
input-adaptive-
width input {
display: inline-block;
height: 100%;
width: 100%;
background: inherit;
position: absolute;
left: 0;
top: 0;
padding: 0;
opacity: 1;
min-
width: 20px;
border: none;
}
.
input-adaptive-
width input:focus {
outline: 0;
}
```
这段代码通过将 `span`
设置为与 `
input` 相同的高度，并隐藏该 `span`，使其不显示但仍然占据空间，从而实现了 `
input` 的自适应
宽度效果[^1]。
#### 4. 使用 Flexbox 或 Grid 布局
现代
CSS 布局技术如 Flexbox 和 Grid 也可以用来更灵活地控制 `
input` 元素的
宽度。例如，在 Flexbox 中，可以通过
设置父容器的 `display: flex;` 并结合 `flex-grow` 属性来实现：
```html
<div class="container">
<
input type="text" />
</div>
```
```
css
.container {
display: flex;
}
.container
input {
flex-grow: 1;
}
```
这会让 `
input` 元素在其父容器内尽可能扩展以填满可用空间[^2]。
---
本文介绍了一种使用CSS表达式设置输入框宽度的方法，该方法能够根据不同类型的输入框自动调整其宽度，确保了良好的用户体验。
扫一扫
1928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
