Đệm trong phạm vi đầu vào phá vỡ chiều rộng 100%

Ok, vì vậy chúng tôi biết rằng việc thiết lập phần đệm cho một đối tượng sẽ khiến chiều rộng của nó thay đổi ngay cả khi nó được đặt rõ ràng. Trong khi người ta có thể tranh luận logic đằng sau điều này, nó gây ra một số vấn đề với một số yếu tố.

Trong hầu hết các trường hợp, bạn chỉ cần thêm một phần tử con và thêm phần đệm vào phần tử đó thay vì phần tử được đặt thành 100%, nhưng đối với đầu vào biểu mẫu, đó không phải là một bước có thể.

Hãy xem cái này: http://sandman.net/test/formcss.html

Đầu vào thứ hai có phần đệm được đặt thành 5px mà tôi rất thích cài đặt mặc định. Nhưng thật không may, điều đó làm cho đầu vào tăng 10px theo mọi hướng, bao gồm thêm 10px vào chiều rộng 100%.

Vấn đề ở đây là tôi không thể thêm một phần tử con bên trong đầu vào để tôi không thể sửa nó. Vì vậy, câu hỏi là:

Có cách nào để thêm phần đệm bên trong đầu vào mà vẫn giữ nguyên chiều rộng 100% không? Nó cần phải là 100% vì các biểu mẫu sẽ hiển thị theo các chiều rộng khác nhau của cha mẹ vì vậy tôi không biết trước chiều rộng của bố mẹ.

Sử dụng CSS3, bạn có thể sử dụng kích thước hộp thuộc tính để thay đổi cách trình duyệt tính toán độ rộng của đầu vào .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Bạn có thể đọc thêm về nó ở đây: http://css-tricks.com/box-sizing/

Tôi không biết nó tương thích trình duyệt chéo như thế nào (nó hoạt động trong firefox và safari), nhưng bạn có thể thử giải pháp này:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Chỉ đăng các giá trị mà tôi đã thay đổi)

Một lựa chọn là bọc INPUTtrong một DIVcái có đệm.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Việc quên lãng calccó thể đến giải cứu ở đây:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Vì chúng ta biết phần đệm sẽ thêm vào chiều rộng của phần tử, chúng ta chỉ cần trừ phần đệm ra khỏi chiều rộng tổng thể. Nó được hỗ trợ bởi tất cả các trình duyệt chính, đáp ứng nhanh và không yêu cầu div trình bao bọc lộn xộn.

Tôi đã có một số vấn đề với một cái gì đó tương tự như thế này. Tôi có tds với đầu vào 100% và một phần đệm nhỏ. Những gì tôi đã làm là bù đắp cho phần đệm trên td như sau:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

phần đệm 8px để bao gồm viền và phần đệm của đầu vào / textarea. Hi vọng điêu nay co ich!

Có lẽ lấy đường viền + nền ra khỏi input, và thay vào đó đặt nó trong một divđường viền + nền và chiều rộng: 100%, và đặt lề trên input?

Một giải pháp tôi đã tìm thấy công việc là định vị hoàn toàn đầu vào với thẻ cha tương đối được định vị.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Áp dụng phong cách:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

Điều duy nhất cần lưu ý là thẻ đoạn cần cài đặt chiều cao vì trẻ em được định vị tuyệt đối của nó sẽ không mở rộng chiều cao của nó. Điều này tránh sự cần thiết phải đặt width: 100%bằng cách khóa nó ở bên trái và bên phải của phần tử cha.

Hãy thử sử dụng tỷ lệ phần trăm cho phần đệm của bạn:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

Nếu bạn lo lắng về người dùng trên các trình duyệt cũ không thể nhìn thấy bóng hộp, chỉ cần cung cấp cho đầu vào một màu nền tinh tế làm bản sao lưu. Nếu bạn đang sử dụng pixel cho loại điều này, thì khả năng là bạn đang sử dụng chúng ở nơi khác, điều này có thể đưa ra một vài thách thức bổ sung, hãy cho tôi biết nếu bạn gặp phải chúng.

Điều duy nhất tôi biết để ngăn chặn điều này là gán các giá trị như thế 100% -10. Nhưng nó có một số vấn đề tương thích tho.