开发者社区> 问答> 正文

inline-block中设置margin影响同行元素?

<label>用户名:</label><input class="topinput" type="text" />
<label>密码:</label><input class="topinput" type="text" />
<input class="loginbtn" value="" type="button" />
<a class="toplink" href="">5秒注册</a><span>|</span><a class="toplink" href="">忘记密码</a>

.left_top{float: left;color: #6C6B6B;line-height: 34px;height: 34px;}
.topinput{border: 1px solid #CFCFCF;width: 93px;clear: both;}
.loginbtn{background: url(../images/loginbtn.jpg) left center no-repeat;width: 52px;height: 29px;}

这里登陆btn是一个图片,因我设置了height和line-height后,元素都垂直剧中了,这很好,但我插入这张背景图片后是顶格的
screenshot

展开
收起
杨冬芳 2016-06-03 15:44:53 2179 0
1 条回答
写回答
取消 提交回答
  • IT从业

    由于.loginbtn是一个行内元素,而且它的高度(height: 29px;)比起另外几个行内元素要高。你又没有设置.loginbtn相对于其他行内元素的垂直对齐方式(默认是vertical-align: baseline;),所以导致没有像你想象的方式对齐。 加一个vertical-align: middle;可以达到你期望的效果:

    .loginbtn {
    background: url(http://placehold.it/52x150) left center no-repeat;
    width: 52px;
    height: 29px;
    vertical-align: middle;
    }

    DEMO:http://jsbin.com/qekibeteni/edit?output

    另外,例子中,在inline-block中设置margin肯定会影响同行元素,因为它们存在某种对齐方式。

    2019-07-17 19:26:44
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载