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

为什么同样都是inline-block的两个元素（天蓝色的div块和文本的div），在一行上位置不在一个水平线上？位置高低差这么多？望指教！

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;
 }

<body>
 <div class="all">
    <div class="node-warp">
        <div class="node-item">
            <div class="title-icon"></div>
            <div class="title-content">开始<div>
        <div>
    <div>
 <div>
<body>

阅读 3.5k

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    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;
    }
  </style>

  <style>
     .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;
    }
  </style>
</head>

<body>

  <body>
    <div class="all">
      <div class="node-warp">
        <div class="node-item">
          <div class="title-icon"></div>
          <div class="title-content">开始</div>
        </div>
      </div>
    </div>



    <div class="demo">
      <div class="demo-warp">
        <div class="demo-item">
          <div class="demo-icon"></div>
          <div class="demo-content">开始</div>
        </div>
      </div>
    </div>

</html>

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？