html - css 元素对齐的问题

问题描述

问 题

谢谢你点开问题。

1. 问题描述：
   在没有设置font-siz和font-family属性之前，两元素是对齐的，但设置之后出现了不对齐的问题。

如下图所示：
一开始是这样的：

设置font-size和font-family两个属性或者其中一个属性都会造成不对齐的情况。

1. html如下：

<div id="table1">
        <form>
            <input type="text" class="search" maxlength="32" size="108" />
            <input type="submit" class="button" value="百度一下" />
        </form>
    </div>

css如下：

    *{
        padding: 0px;
        margin: 0px;
    }
    .search{
        line-height: 32px;
    }
    .button{
        display: inline-block;
        height: 36px;
        width: 82px;
        background-color: #46A3FF;
        border-style: none;
        margin-left: -8px;
        font-size: 20px;
        font-family: 微软雅黑;
        padding: 0px;
                    }

刚开始学习，有点困惑，第一我对button设置了width和height属性，padding也是0px，不知道为什么会出现不对齐的情况？

解决方案

vertical-align: top | bottom | sub

这篇关于html - css 元素对齐的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！