首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么,如果我应用display inline-block属性,我的HTML元素是从底部开始的?

为什么,如果我应用display inline-block属性,我的HTML元素是从底部开始的?
EN

Stack Overflow用户
提问于 2019-06-04 02:50:18
回答 2查看 134关注 0票数 1

我想生成像component这样的注释列表,因此我使用了div,并相应地应用了显示块和内联块。但是我不知道为什么我的HTML元素是从最下面的位置开始的(如果你增加和减少你可以弄清楚它).Pls帮助在这方面。

.comment {
  color: red;
}

.imagePanel,
.textPanel,
.userName,
.timeStamp {
  display: inline-block;
}

.userImage {
  width: 60px;
}

.userName a {
  font-size: 18px;
  font-weight: 800;
  color: unset;
  margin-right: 5px;
}
<div className='mainCommentPanel'>
  <div className='imagePanel'>
    <img className="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' />
  </div>
  <div className="textPanel">
    <div className="UserBox">
      <div className="userName"><a>User Name</a></div>
      <div className="timeStamp">{new Date().toLocaleTimeString()}</div>
    </div>
    <div className="comment">
      <p>This page is very cool!</p>
    </div>
  </div>
</div>

在其提到的height和width属性中,元素应该从最上面的位置开始。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-04 03:19:34

对于inline-block,默认情况下vertical-align设置为baseline,将其设置为vertical-align: top就可以了!干杯。

票数 3
EN

Stack Overflow用户

发布于 2019-06-04 03:03:00

.comment {
  color: red;
}

.imagePanel,
.textPanel,
.userName,
.timeStamp {
  display: inline-block;
}

.userImage {
  width: 60px;
}

.userName a {
  font-size: 18px;
  font-weight: 800;
  color: unset;
  margin-right: 5px;
}

.imagePanel{
  vertical-align:top;
}
<div class='mainCommentPanel'>
  <div class='imagePanel'>
    <img class="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' />
  </div>
  <div class="textPanel">
    <div class="UserBox">
      <div class="userName"><a>User Name</a></div>
      <div class="timeStamp">{new Date().toLocaleTimeString()}</div>
    </div>
    <div class="comment">
      <p>This page is very cool!</p>
      <p>This page is very cool!</p>
      <p>This page is very cool!</p>
      <p>This page is very cool!</p>
      <p>This page is very cool!</p>
    </div>
  </div>
</div>

您必须使用类属性而不是className。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56433000

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档