/* 修改导航栏的样式，使其包含的元素水平居中 */
.navbar.user-info-navbar {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
}

/* 修改左侧菜单图标的样式 */
.navbar.user-info-navbar .fa-bars {
  display: inline-block; /* 确保图标是行内块元素 */
  margin-right: auto; 
}

/* 修改搜索框和按钮的样式 */
.suiShiDaoHang {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  flex-grow: 1; /* 允许.suiShiDaoHang元素占用剩余空间 */
}

/* 设置输入框的样式 */
.suiShiDaoHang .content {
  display: inline-block; /* 确保输入框是行内块元素 */
  width: 500px; /* 设置输入框的宽度 */
  padding: 10px; /* 设置内边距 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 4px; /* 设置边框圆角 */
  font-size: 16px; /* 设置字体大小 */
  box-sizing: border-box; /* 包括边框和内边距在内的总宽度和高度 */
}

/* 设置按钮的样式 */
.suiShiDaoHang .button {
  display: inline-block; /* 确保按钮是行内块元素 */
  padding: 10px 20px; /* 设置内边距 */
  border: none; /* 移除边框 */
  border-radius: 4px; /* 设置边框圆角 */
  background-color: #007bff; /* 设置背景颜色 */
  color: white; /* 设置字体颜色 */
  cursor: pointer; /* 设置鼠标悬停时的指针样式 */
  font-size: 16px; /* 设置字体大小 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

/* 移动端样式 */
@media (max-width: 768px) {
  .navbar.user-info-navbar {
    flex-direction: column; /* 在小屏幕上将导航栏改为垂直布局 */
    align-items: stretch; /* 让元素伸展以填满容器宽度 */
  }

  .navbar.user-info-navbar .fa-bars {
    margin-right: 0; /* 移除图标右外边距 */
    margin-bottom: 10px; /* 添加底部外边距 */
  }

  .suiShiDaoHang {
    flex-direction: column; /* 在小屏幕上将搜索框和按钮改为垂直布局 */
    align-items: stretch; /* 让元素伸展以填满容器宽度 */
  }

  .suiShiDaoHang .content {
    width: 100%; /* 在小屏幕上输入框宽度为100% */
    margin-bottom: 10px; /* 添加底部外边距 */
    margin-top: 5px; /* 设置顶部边距 */
  }

  .suiShiDaoHang .button {
    width: 100%; /* 在小屏幕上按钮宽度为100% */
    text-align: center; /* 文本居中显示 */
  }
}