本文旨在解决在使用HTML、CSS和JavaScript构建在线调查问卷时，星级评分组件（starQuestion）未能像其他问题类型一样居中显示的问题。通过分析HTML结构和CSS样式，找出导致未居中显示的原因，并提供相应的解决方案，确保星级评分组件在页面上正确对齐。
问题分析
根据提供的代码，星级评分组件的HTML结构与其他问题类型存在显著差异。星级评分组件被包裹在一个
结构中，而其他问题类型（如opQuestion、shAnQuestion、numQuestion）则直接使用元素。这种结构上的差异是导致星级评分组件未居中显示的主要原因。 解决方案
要解决星级评分组件未居中显示的问题，需要修改HTML结构和CSS样式。以下是推荐的解决方案：
-
修改HTML结构：
立即学习“前端免费学习笔记（深入）”；
将星级评分组件的HTML结构与其他问题类型保持一致，移除
包裹，直接使用元素。修改后的HTML结构如下： <div class="starQuestion">
<div class="questionName" contenteditable="true">Your Question</div>
<button class="remove-qu" type="button">remove Question</button>
<div class="numbers">
<input class="star star-5" id="star-5" type="radio" name="star" disabled/>
<label class="star star-5" for="star-5"> </label>
<input class="star star-4" id="star-4" type="radio" name="star" disabled/>
<label class="star star-4" for="star-4"> </label>
<input class="star star-3" id="star-3" type="radio" name="star" disabled/>
<label class="star star-3" for="star-3"> </label>
<input class="star star-2" id="star-2" type="radio" name="star" disabled/>
<label class="star star-2" for="star-2"> </label>
<input class="star star-1" id="star-1" type="radio" name="star" disabled/>
<label class="star star-1" for="star-1"> </label>
</div>
</div>登录后复制 -
修改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',
`<div class="starQuestion">
<div class="questionName" contenteditable="true">Your Question</div>
<button class="remove-qu" type="button">remove Question</button>
<div class="numbers">
<input class="star star-5" id="star-5" type="radio" name="star" disabled/>
<label class="star star-5" for="star-5"> </label>
<input class="star star-4" id="star-4" type="radio" name="star" disabled/>
<label class="star star-4" for="star-4"> </label>
<input class="star star-3" id="star-3" type="radio" name="star" disabled/>
<label class="star star-3" for="star-3"> </label>
<input class="star star-2" id="star-2" type="radio" name="star" disabled/>
<label class="star star-2" for="star-2"> </label>
<input class="star star-1" id="star-1" type="radio" name="star" disabled/>
<label class="star star-1" for="star-1"> </label>
</div> </div>`);
let removeQuestions = document.querySelectorAll('.remove-qu');
if (removeQuestions) {
removeQuestions.forEach((item) => {
item.onclick = function () { this.parentNode.remove(); }
})
}
}登录后复制
示例代码
以下是修改后的完整示例代码：
HTML: <div id="questionaire">
<div class="opQuestion">...</div>
<div class="shAnQuestion">...</div>
<div class="numQuestion">...</div>
<div class="starQuestion">
<div class="questionName" contenteditable="true">Your Question</div>
<button class="remove-qu" type="button">remove Question</button>
<div class="numbers">
<input class="star star-5" id="star-5" type="radio" name="star" disabled/>
<label class="star star-5" for="star-5"> </label>
<input class="star star-4" id="star-4" type="radio" name="star" disabled/>
<label class="star star-4" for="star-4"> </label>
<input class="star star-3" id="star-3" type="radio" name="star" disabled/>
<label class="star star-3" for="star-3"> </label>
<input class="star star-2" id="star-2" type="radio" name="star" disabled/>
<label class="star star-2" for="star-2"> </label>
<input class="star star-1" id="star-1" type="radio" name="star" disabled/>
<label class="star star-1" for="star-1"> </label>
</div>
</div>
</div>登录后复制 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中星级评分组件未居中显示的问题的详细内容，更多请关注php中文网其它相关文章！
广告
581
收藏
