解决表单中文本框和提交按钮对不齐的问题

最新推荐文章于 2023-11-20 16:29:02 发布

潇潇的潇

最新推荐文章于 2023-11-20 16:29:02 发布

阅读量2.6k

点赞数 3

分类专栏： JavaWeb 文章标签：表单

本文链接：https://blog.csdn.net/gxx_csdn/article/details/78863758

版权

JavaWeb 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

在创建一个表单时，表单有一个默认的长和宽，大致就是这样：
这里写图片描述
长和宽都比较小，放在一个网页上就很难看了，之后我对它的长宽进行了相关的设置，现在成了这样：

输入框和提交按钮对不齐，在网上查找办法发现最多的解决方案是在它们的样式里添加：vertical-align: middle，
然而我这里依然有问题，现在成了这样：
这里写图片描述
好吧，还是差一点，改成：vertical-align: bottom并在按钮样式里添加margin-left: -6px去掉它和文本框之间的间隙，就好了：

相应的CSS样式如下：

.inputBox_index{
    width:460px;
    height:38px;
    border: 1px solid blue;
    vertical-align: bottom;
}
.submitBtn{
    width:90px;
    height:38px;
    font-size: large;
    vertical-align: bottom;
    margin-left: -6px;
}

表单如下：

    <form action="queryServlet" method="POST">
        <input type="text" name="inputText" autofocus required="required" class="inputBox_index">
        <input type="submit" value="搜索一下" class="submitBtn">
    </form>