CSS定制5输入表单：容器尺寸设置及输入框宽度失效问题求助

Let's fix both the container sizing and input width problem step by step:

1. Set Up the Form Container Dimensions #

First, we'll define the required 650px width and 500px height for your form container, plus adjustments to ensure content fits properly:

.form {
  margin-top: 10px;
  margin-left: 60px;
  padding: 20px; /* Reduced padding to prevent overflow in the 500px height */
  width: 650px;
  height: 500px;
  border: 1px solid #ddd; /* Optional: helps visualize the container bounds */
  overflow-y: auto; /* Adds scroll if content exceeds container height */
  box-sizing: border-box; /* Ensures padding doesn't expand the container's total size */
}

2. Fix the Input Width Override Issue #

The problem with your .i1 width not taking effect is CSS specificity: Bootstrap's built-in .form-control class has a default width: 100% rule that's overriding your custom style. We'll use a more specific selector to prioritize your rule:

/* Target the first input with higher specificity to beat Bootstrap's styles */
.form .col-sm-10 .i1 {
  width: 70px;
}

3. Refine Label/Input Spacing #

Adjust spacing to fit neatly within the 500px height without overflow:

.form label, .form input {
  display: block;
  padding: 6px;
}

.form input {
  border-radius: 4px;
}

.form label {
  margin-top: 15px; /* Reduced from 20px to save vertical space */
}

Complete Corrected CSS #

Here's the full CSS code that addresses both issues:

.form {
  margin-top: 10px;
  margin-left: 60px;
  padding: 20px;
  width: 650px;
  height: 500px;
  border: 1px solid #ddd;
  overflow-y: auto;
  box-sizing: border-box;
}

.form label, .form input {
  display: block;
  padding: 6px;
}

.form input {
  border-radius: 4px;
}

.form label {
  margin-top: 15px;
}

.form .col-sm-10 .i1 {
  width: 70px;
}

Key Notes: #

• box-sizing: border-box ensures your container stays exactly 650x500px, even with padding.
• The specific selector .form .col-sm-10 .i1 has higher priority than Bootstrap's .form-control, so your width rule will now apply.
• overflow-y: auto prevents content from spilling outside the container if needed.

Replace your existing CSS with this code, and your form will match the required container size while respecting your custom input width.

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