html字段在同一个水平线上,为什么同一行的元素不在一个水平线上？

这个问题的本质是 元素设置成 内联元素的对齐问题，

可以在.title-content里面设置vertical-align: top;使之对齐；

但是对于这种布局，我推荐使用 display：flex;

Document

html,

body {

margin: 0;

padding: 0;

}

.node-warp {

margin-left: 200px;

margin-top: 100px;

width: 150px;

height: 200px;

background-color: burlywood;

overflow-y: auto;

}

.node-item {

width: 100%;

background-color: chartreuse;

height: 36px;

font-size: 14px;

}

.title-icon {

width: 15px;

height: 100%;

background-color: cyan;

border-radius: 7px 0 0 7px;

display: inline-block;

}

.title-content {

height: 36px;

line-height: 36px;

border: 1px solid grey;

display: inline-block;

vertical-align: top;

}

.demo-warp {

margin-left: 200px;

margin-top: 100px;

width: 150px;

height: 200px;

background-color: burlywood;

overflow-y: auto;

}

.demo-item {

/* width: 100%; */

display: flex;

background-color: chartreuse;

height: 36px;

font-size: 14px;

}

.demo-icon {

width: 15px;

height: 100%;

background-color: cyan;

border-radius: 7px 0 0 7px;

display: inline-block;

}

.demo-content {

height: 36px;

line-height: 36px;

border: 1px solid grey;

display: inline-block;

}

开始

开始