本文旨在解决在 CSS 中如何对齐单选框和复选框的文本，以及如何使表单占据整个页面并添加滚动条的问题。通过移除不必要的居中样式，并利用 CSS 属性调整页面高度，可以实现预期的布局效果。本文提供了详细的 CSS 代码示例和 HTML结构，帮助开发者轻松实现目标。

对齐单选框和复选框的文本

在默认情况下，单选框和复选框的文本可能会因为继承了父元素的 text-align: center; 样式而居中显示。为了将这些文本对齐到左侧，需要移除或覆盖这些居中样式。

解决方案：

1. 移除不必要的居中样式： 检查包含单选框和复选框的父元素是否应用了 text-align: center; 样式。如果存在，移除该样式。在提供的代码中，.form-group 类包含了 text-align: center; 属性，这会导致单选框和复选框居中。因此，需要从包含单选框的 div 元素中移除 .form-group 类，或者覆盖该类的 text-align 属性。
2. 应用左对齐样式： 为单选框和复选框的标签应用 text-align: left; 样式。这可以通过直接为 元素添加样式来实现，也可以通过 CSS 类来实现。

示例代码：

HTML:

    
         Definitely
    

    
         Maybe
    

    
         Definitely not
    




    
What would you like to see improved? (Check all that apply)
    
         Front-End skills

    
    
         Back-End skills

    
    

CSS:

.text-center {
    text-align: center;
    margin: auto;
}

.form-group {
    margin: auto; /* Removed text-align: center; */
}

.clue {
    text-align: center;
}

.input-checkboxes {
    text-align: center;
}

.inline {
    margin-right: 6px;
    text-align: left; /* Add this line */
}

解释：

• .text-center: 用于居中文本，如标题和描述。
• .form-group: 原本用于包含表单元素，但移除了 text-align: center 以避免影响单选框和复选框的对齐。
• .inline: 用于单选框和复选框的标签，添加了 text-align: left 以将文本对齐到左侧。

实现页面全屏和滚动效果

要使表单占据整个页面并添加滚动条，需要确保 body 元素的高度为 100%，并且表单内容超出屏幕高度时能够滚动。

解决方案：

1. 设置 body 元素的高度： 将 body 元素的高度设置为 100vh，确保它占据整个视口的高度。
2. 确保内容超出屏幕高度： 如果表单内容不足以填充整个页面，可以增加一些内容或者调整容器的最小高度。
3. 添加滚动条： 当内容超出屏幕高度时，浏览器会自动添加滚动条。

示例代码：

CSS:

body {
    background: url(images/tech2.webp);
    background-size: 100%;
    min-height: 100vh; /* Changed height to min-height and added vh unit */
    margin: 0; /* Reset default margin */
    padding: 0;
}

.container {
    grid-column: 5 / 9;
    max-width: 600px;
    margin: 20px auto 20px;
    padding: 30px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.763);
}

解释：

• min-height: 100vh;: 确保 body 元素至少占据整个视口的高度。使用 min-height 而不是 height 可以确保内容超出屏幕时能够滚动。
• margin: 0; padding: 0;: 重置 body 元素的默认边距和内边距，以确保页面内容紧贴边缘。

完整代码示例

    
    
    
    


    

        
Survey Form
        
Thank you for taking the time to help me improve my skills as a developer
    

    
        

            
                Name: 
                    
                

            

            
                Email: 
                    
                

            

            
                Age: 
                    
                

            

            
                
Which option best describes your current role?
                
                    Select current role
                    Student
                    Teacher
                    Full time job coding
                    Prefer not to say
                    Other
                

            

            
                
Based on my portfolio/resume, would you say that I am job ready?
                
                     Definitely
                

                
                     Maybe
                

                
                     Definitely not
                

            

            
                In your opinion, what would you say is my strongest skill?

                    
                        Select an option
                        HTML/CSS
                        Javascript
                        UI/UX Design
                        Responsiveness/Functionability
                        Project Ideas
                    

                
            

            
                
What would you like to see improved? (Check all that apply)
                
                     Front-End skills

                
                
                     Back-End skills

                
                
                     UI/UX Design

                
                
                     Responsiveness/Functionality

                
                
                     Project Ideas

                
                
                     Number of Projects

                
            

            
                
Any other comments or suggestions?
                
            

            
                Submit
            
        
    

/* styles.css */
.text-center {
    text-align: center;
    margin: auto;
}

.form-group {
    margin: auto;
}

.clue {
    text-align: center;
}

.input-checkboxes {
    text-align: center;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: lato, arial;
}

body {
    background: url(images/tech2.webp);
    background-size: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    grid-column: 5 / 9;
    max-width: 600px;
    margin: 20px auto 20px;
    padding: 30px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.763);
}

header {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

h1 {
    margin-bottom: 5px;
}

.checkbox, .radio-button {
    display: block;
}

.inline {
    margin-right: 6px;
    text-align: left;
}

#submit {
    font-size: 16px;
    display: block;
    margin: 0 auto;
    background: #2f80ed;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
}

@media only screen and (max-width: 1000px) {
    .container {
        grid-column: 1 / 12;
    }
}

总结

通过移除不必要的居中样式，并利用 CSS 属性调整页面高度，可以轻松实现单选框和复选框的文本对齐，以及页面全屏滚动效果。 在实际开发中，可以根据具体需求调整样式，以达到最佳的布局效果。 始终记得检查和重置默认样式，以避免不必要的样式冲突。