如何缩小表单宽度，使其与内部label、input控件尺寸一致

问题根因 #

<form> 标签默认是块级元素，默认宽度为父容器的100%，你设置的宽度不生效大概率是有更高优先级的CSS规则覆盖了行内样式，或者盒模型计算规则导致你看到的总宽度和设置值不一致。

解决方案 #

1. 解决宽度不生效问题

• 先排查样式冲突：给行内样式加 !important 测试是否生效，代码如下：

<form style="width: 300px !important;" method='GET'>
Test to see form size
</form>

如果生效就说明你的项目里有其他全局CSS规则（比如类选择器、标签选择器设置了form的宽度）优先级高于行内样式，找到对应规则修改即可。

• 如果要让表单宽度自动适配内部内容，不用写死固定值，把表单设置为行内块级元素即可，它的宽度会自动收缩到刚好包裹内部的label、input元素：

<form style="display: inline-block;" method='GET'>
<label for="search">搜索：</label>
<input type="text" id="search" name="keyword">
</form>

2. 实现右上角放置需求

直接给表单加绝对定位即可，如果你要相对于页面右上角放置，代码如下：

<form style="position: absolute; top: 16px; right: 16px; display: inline-block; margin: 0;" method='GET'>
<label for="search">搜索：</label>
<input type="text" id="search" name="keyword">
</form>

如果要相对于某个父容器右上角放置，给对应的父容器加 position: relative; 即可。

额外排查点 #

如果调整后宽度还是不符合预期，检查是否全局设置了盒模型规则，给form加 box-sizing: border-box; 可以让设置的width包含padding和border，避免总宽度超出预期。

内容的提问来源于stack exchange，提问作者Ross Symonds