本文旨在解决在使用HTML、CSS和JavaScript构建在线调查问卷时，星级评分组件（starQuestion）未能像其他问题类型一样居中显示的问题。通过分析HTML结构和CSS样式，找出导致未居中显示的原因，并提供相应的解决方案，确保星级评分组件在页面上正确对齐。
问题分析
根据提供的代码，星级评分组件的HTML结构与其他问题类型存在显著差异。星级评分组件被包裹在一个
结构中，而其他问题类型（如opQuestion、shAnQuestion、numQuestion）则直接使用
解决方案
要解决星级评分组件未居中显示的问题，需要修改HTML结构和CSS样式。以下是推荐的解决方案：
修改HTML结构：
立即学习“前端免费学习笔记（深入）”；
将星级评分组件的HTML结构与其他问题类型保持一致，移除
包裹，直接使用
Your Question
修改CSS样式：
确保.starQuestion类具有与其他问题类型相同的CSS样式，例如border、border-radius、margin和text-align。这些样式定义了组件的边框、圆角、外边距和文本对齐方式。在提供的CSS代码中，.starQuestion已经定义了这些样式，因此无需额外修改。
调整numbers容器宽度：
星标的宽度总和可能超过.starQuestion容器的可用宽度，导致无法居中。.numbers类添加min-width属性，确保容纳所有星标。根据具体情况调整数值，比如示例代码中提到至少 215px。
.numbers { margin-bottom: 25px; min-width: 215px; /* 确保星标可以容纳 */ display: inline-block; /* 确保容器宽度自适应内容 */}
JavaScript代码修改：
在 newStarQuestion 函数中，需要将插入HTML的代码进行相应的修改，以匹配新的HTML结构。
function newStarQuestion() { questionnaire.insertAdjacentHTML('beforeend', ` Your Question `); let removeQuestions = document.querySelectorAll('.remove-qu'); if (removeQuestions) { removeQuestions.forEach((item) => { item.onclick = function () { this.parentNode.remove(); } }) } }
示例代码
以下是修改后的完整示例代码：
HTML:
.........Your Question
CSS:
.opQuestion, .shAnQuestion, .numQuestion, .starQuestion { border: 3px solid black; border-radius: 25px; margin: 30px 200px 20px 200px; text-align: center;}.numbers { margin-bottom: 25px; min-width: 215px; /* 确保星标可以容纳 */ display: inline-block; /* 确保容器宽度自适应内容 */}
注意事项
确保所有问题类型都具有相同的CSS样式，以便在页面上保持一致的视觉效果。根据需要调整.numbers容器的最小宽度，以适应不同数量的星标或不同的星标大小。如果星标仍然未居中显示，请检查父元素的宽度是否足够容纳星标。
总结
通过修改HTML结构，并确保星级评分组件具有与其他问题类型相同的CSS样式，可以解决星级评分组件未居中显示的问题。同时，通过调整.numbers容器的最小宽度，可以确保星标在容器内正确显示。遵循这些步骤，可以确保在线调查问卷中的所有问题类型都正确对齐，从而提供更好的用户体验。
以上就是解决HTML中星级评分组件未居中显示的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579039.html
微信扫一扫 
支付宝扫一扫 
