嘿，我来帮你搞定这个布局小问题！你现在遇到的情况是图片和输入框自动换行了，主要原因是默认情况下这两个元素的垂直对齐方式不一致，或者父容器宽度不够导致换行。下面给你几种实用的解决方案：

方案1：调整垂直对齐属性（快速修复） #

默认情况下，图片和输入框的基线对齐方式不同，会导致视觉上的换行或错位。给两个元素都加上vertical-align: middle就能让它们在同一行垂直居中：

<img class="comment-profile-pic" src="https://drgsearch.com/wp-content/uploads/2020/01/no-photo.png" alt=""> 
<input type="text" class="post-comment">

.comment-profile-pic { 
  border-radius: 50%; 
  width: 50px; 
  vertical-align: middle; /* 新增：垂直居中对齐 */
}
.post-comment {
  vertical-align: middle; /* 新增：和图片保持一致的对齐方式 */
}

方案2：使用Flexbox布局（推荐，更灵活） #

Flexbox是现代前端布局的首选方案，能轻松实现元素的同行排列和对齐，还能方便控制空间分配：

首先给图片和输入框套一个父容器：

<div class="comment-input-wrapper">
  <img class="comment-profile-pic" src="https://drgsearch.com/wp-content/uploads/2020/01/no-photo.png" alt=""> 
  <input type="text" class="post-comment" placeholder="写下你的评论...">
</div>

然后给父容器添加Flex样式：

.comment-input-wrapper {
  display: flex;
  align-items: center; /* 让元素垂直居中 */
  gap: 10px; /* 图片和输入框之间的间距，可根据需求调整 */
}
.comment-profile-pic { 
  border-radius: 50%; 
  width: 50px; 
}
.post-comment {
  flex: 1; /* 让输入框占满剩余空间 */
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 20px;
  outline: none;
}

这种方法不仅能解决同行问题，还能让输入框自适应父容器宽度，布局更美观。

方案3：设置为inline-block元素 #

如果需要兼容较老的浏览器，也可以把两个元素都设为inline-block，确保它们在同一行：

.comment-profile-pic { 
  border-radius: 50%; 
  width: 50px; 
  display: inline-block;
  vertical-align: middle;
}
.post-comment {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 65px); /* 减去图片宽度和间距，确保不换行 */
}

内容的提问来源于stack exchange，提问作者Vansh Khera