如何让id为bottomlist的列表始终居中页面底部？及文本换行技巧

问题1：让#bottomlist始终居中于页面底部 #

原代码中#bottomlist用right:25%固定百分比定位，窗口宽度变化时会因适配失效导致位置错乱。修改CSS，通过水平居中变换实现自适应居中：

#bottomlist {
  position: absolute;
  left: 50%; /* 先定位到页面水平中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现真正居中 */
  bottom: 10%;
  padding: 0; /* 清除ul默认内边距，避免居中偏移 */
  margin: 0; /* 清除ul默认外边距 */
}

#bottomlist li {
  display: inline-block; /* 替换inline，兼容padding/margin样式，同时保持同行排列 */
  margin: 0 10px; /* 调整列表项间距，避免拥挤 */
}

问题2：让文本"Sign in Using Different Username"作为单个元素自动换行 #

不要用<br>硬换行，也不要在<li>里嵌套<div>（违反HTML规范，会引发格式异常）。通过给文本容器设置可控宽度实现自动换行：

步骤1：调整HTML（假设文本在#bottomlist的列表项中） #

<ul id="bottomlist">
  <li><span class="breakable-text">Sign in Using Different Username</span></li>
  <!-- 其他列表项 -->
</ul>

步骤2：添加CSS规则 #

.breakable-text {
  display: inline-block; /* 让元素支持宽度设置 */
  max-width: 180px; /* 文本超过该宽度时自动换行，可根据需求调整数值 */
  text-align: center; /* 保持换行后的文本居中对齐 */
}

如果希望完全随窗口宽度自适应，可去掉max-width，改为给#bottomlist设置合适的宽度限制，文本会自动根据可用空间换行。

额外修复：HTML结构规范问题 #

原代码中<ul>直接嵌套<div>不符合HTML规范（<ul>的直接子元素只能是<li>），会导致潜在布局问题，需移除多余的<div>；同时两个输入框使用了相同的id，需修改为唯一值：

<form action="../designpage/design.html">
  <ul>
    <li><input id="email" type="email" placeholder="Enter email" required></li>
    <li><input id="password" type="password" placeholder="Enter password" required></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

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