html中input的text类型和button类型不一致问题

本文主要是介绍html中input的text类型和button类型不一致问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

css：

input{
    width: 300px;
    height: 40px;
    font-size: 20px;
}

html：

          <div>
          <span>{{title}}</span>
          <input v-bind:type="input_type"
                 v-bind:placeholder="input_placeholder"
                 v-bind:value="input_text"
                 />
          </div>

显示效果：

这里明显button类型的input的width要短上一小点！

解决：在input框添加样式 （不是单独在类型为text或者button的input上加，所有input都加上）

box-sizing: border-box;

效果：

参考博主：https://blog.csdn.net/weixin_62042254/article/details/121905450

这篇关于html中input的text类型和button类型不一致问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！