如何使你的表单适应容器的宽度？_技术教程

本文将指导你如何调整表单的宽度，使其完美适应其父容器的宽度。通过修改 CSS 样式中的 `flex` 属性，并调整容器的宽度，以及移除不必要的背景色定义，你可以轻松解决表单超出容器的问题，从而实现响应式布局。

解决表单超出容器宽度的问题

在创建响应式布局时，经常会遇到表单元素超出其父容器宽度的问题。这通常是由于 CSS 样式的设置不当导致的。本文将提供一些解决方案，帮助你解决这个问题，使表单能够完美适应容器的宽度。

1. 调整 Flex 属性

在使用 Flexbox 布局时，flex 属性控制着元素在容器中的伸缩能力。如果表单的父容器使用了 Flexbox 布局，那么调整 flex 属性是解决问题的关键。

原始代码中，.columntest 类的 flex 属性被设置为 33.33%。这意味着该元素占据容器宽度的 33.33%。然而，在 Flexbox 布局中，flex 属性的值应该是一个相对值，而不是一个百分比。

解决方案：

将 .columntest 类的 flex 属性更改为 1。

.columntest {
  flex: 1;
}

这将使每个 .columntest 元素在容器中占据相等的比例，从而使表单能够适应容器的宽度。

2. 设置容器宽度为 fit-content

.bgColor 类包含表单的背景颜色。为了确保背景颜色能够适应表单的宽度，需要将 .bgColor 类的 width 属性设置为 fit-content。

解决方案：

在 .bgColor 类中添加 width: fit-content; 属性。

.bgColor {
  background-color: #C32F4B;
  width: fit-content;
}

fit-content 属性会使容器的宽度自动适应其内容的宽度，从而确保背景颜色能够覆盖整个表单区域。

3. 移除冗余的背景色定义

在原始代码中，.container 类中也定义了 background: #C32F4B; 属性。这个定义是冗余的，因为它与 .bgColor 类中的定义重复了。

解决方案：

从 .container 类中移除 background: #C32F4B; 属性。

.container {
    padding: 12px 24px 24px 24px;
    margin: 48px 12px;
    border-radius: 4px;
    width:200px;
    height:400px;
}

完整代码示例

以下是修改后的 CSS 代码：

.columnstest {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 756px;
  height:500px;
  margin: 0 auto;
}

.columntest h3 {
  color: white;
  font-weight: 30px;
}

.columntest p {
  font-family: 'Roboto', sans-serif;
  color: white;
}

.columntest {
  flex: 1;
}

.bgColor {
  background-color: #C32F4B;
  width: fit-content;
}

.container {
    padding: 12px 24px 24px 24px;
    margin: 48px 12px;
    border-radius: 4px;
    width:200px;
    height:400px;
}

/* Add styles to 'label' selector */

label {
    font-size: 0.85em;
    margin-left: 12px;
}

/* Add styles to 'input' and 'textarea' selectors */

input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

/* Add styles to show 'focus' of selector */

input[type=text]:focus, input[type=email]:focus, textarea:focus {
    border: 1px solid green;
}

/* Add styles to the submit button */

input[type=submit] {
    background: #C32F4B;
    margin: 0 auto;
    outline: 0;
    color: white;
    border: solid 1px white;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all ease-in-out 0.1s;
    position: relative;
    display: inline-block;
    text-align: center;
}

/* Add styles for 'focus' property */

input[type=submit]:focus {
    background: #A5D6A7;
    color: whitesmoke;
}

/* Style 'hover' property */

input[type=submit]:hover {
    background: #2196F3;
}

/* Align items to center of the 'div' with the class 'center' */
.center {
    text-align: center;
}

/* label color */
label {
    color: white;
}

/* tel part */
input[type=tel], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}