如何实现HTML页面底部按钮与消息输入框的精准对齐

问题原因 #

你目前用固定margin分别定位输入框和按钮的方式适配性极差，不同屏幕分辨率下一定会出现错位问题，而且很难实现精准对齐。你把两个需要对齐的元素放在同一个form父容器下，直接用flex布局就能轻松实现对齐效果。

具体修改方案 #

1. 新增message-form父容器的样式，用flex实现子元素垂直居中对齐，把原来加在输入框上的外边距统一移到父容器上
2. 删掉输入框和按钮上多余的定位用margin属性
3. 清除在线人数文本的默认margin，避免撑高布局

完整修改后CSS代码 #

/* 新增父容器样式 */
.message-form {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 250px;
  margin-top: 470px;
}

.name-input {
  width: 800px;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 250px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.message-input {
  width: 800px;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.send-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  width: 100px;
  height: 48px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

.clients-total{
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  margin: 0;
}

如果需要调整各个元素的间距，直接修改.message-form的gap值即可。

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