如何使用CSS调整select标签位置 解决全屏显示位置异常问题

问题原因 #

你当前使用固定像素值margin-left: 150px搭配百分比宽度width: 50%控制select位置，当切换到全屏时父容器宽度大幅增加，固定像素的左边距在整体布局中的占比会变小，最终导致位置偏移。

解决方案 #

可根据你的实际布局需求选择以下任意一种方案：

方案1：select需和页面其他内容保持统一对齐逻辑

给外层div添加类名限制最大宽度，确保全屏状态下内容区域宽度和非全屏一致：

1. 修改HTML代码：

<div class="select-wrapper">
  <select class="FeedBack2">
    <option value="Suggestion">Suggestion</option>
    <option value="Complaint">Complaint</option>
    <option value="Idea">Idea</option>
    <option value="Help">Help</option>
  </select>
</div>

2. 修改CSS代码：

/* 新增外层容器规则，max-width可替换为你页面非全屏状态下的内容宽度 */
.select-wrapper {
  max-width: 960px;
  margin: 0 auto;
}
/* 原有样式可保留不变 */
.FeedBack2 { 
  background-color: #da9b48; 
  color: rgb(31, 22, 5); 
  width: 50%; 
  margin-left: 150px; 
  margin-top: 10px; 
  margin-bottom: 20px;
}

方案2：select需始终在容器内居中显示

无需修改HTML，直接调整原有CSS即可：

.FeedBack2 { 
  background-color: #da9b48; 
  color: rgb(31, 22, 5); 
  width: 50%; 
  display: block;
  /* 用auto实现水平居中，上下边距保留原有值 */
  margin: 10px auto 20px;
}

方案3：只需左边距占比固定，无需对齐其他内容

直接把固定像素的左边距改为百分比值即可，百分比数值可根据视觉效果调整：

.FeedBack2 { 
  background-color: #da9b48; 
  color: rgb(31, 22, 5); 
  width: 50%; 
  /* 20%为示例值，调整到和原有150px非全屏效果一致即可 */
  margin-left: 20%; 
  margin-top: 10px; 
  margin-bottom: 20px;
}

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