Hướng dẫn css input width 100 with padding - chiều rộng đầu vào css 100 với đệm

OK, vì vậy chúng tôi biết rằng cài đặt đệm thành một đối tượng khiến chiều rộng của nó thay đổi ngay cả khi nó được đặt rõ ràng. Mặc dù 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ố.

Đối với 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 đó thay vì một phần được đặt thành 100%, nhưng đối với đầu vào hình thức, đó không phải là một bước khả thi.

Hãy xem này:

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

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

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

Đầ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 trong khi vẫn giữ 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ị ở các phụ huynh có chiều rộng khác nhau để tôi không biết trước chiều rộng của cha mẹ.

Isherwood

54,8K16 Huy hiệu vàng108 Huy hiệu bạc149 Huy hiệu đồng16 gold badges108 silver badges149 bronze badges

Hỏi ngày 4 tháng 9 năm 2009 lúc 7:33Sep 4, 2009 at 7:33

1

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 chiều rộng của đầu vào.

input.input {
    width: 100%;
    box-sizing: border-box;
}

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

Isherwood

54,8K16 Huy hiệu vàng108 Huy hiệu bạc149 Huy hiệu đồng16 gold badges108 silver badges149 bronze badges

Hỏi ngày 4 tháng 9 năm 2009 lúc 7:33Dec 17, 2012 at 16:29

0

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 chiều rộng của đầu vào.

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

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

Đã trả lời ngày 17 tháng 12 năm 2012 lúc 16:29Sep 4, 2009 at 7:39

Tôi không biết nó tương thích với 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:michaelk

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

2

Đã trả lời ngày 4 tháng 9 năm 2009 lúc 7:39

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:

MichaelkmichaelkSep 4, 2009 at 7:50

user7116user7116user7116

7395 Huy hiệu bạc9 Huy hiệu Đồng16 gold badges141 silver badges171 bronze badges

2

Một tùy chọn là bọc

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

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

Đã trả lời ngày 4 tháng 9 năm 2009 lúc 7:50

62.1K16 Huy hiệu vàng141 Huy hiệu bạc171 Huy hiệu đồngSep 30, 2017 at 4:34

1

Các

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

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

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

Vì chúng tôi biết phần đệm sẽ thêm vào chiều rộng của phần tử, chúng tôi chỉ cần trừ phần đệm từ 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 và không yêu cầu các div bao bọc lộn xộn.

Đã trả lời ngày 30 tháng 9 năm 2017 lúc 4:34Nov 1, 2011 at 15:17

1

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

Đệm 8px để bao gồm đường viền và đệm của đầu vào/textarea. Hi vọng điêu nay co ich!Sep 4, 2009 at 7:44

Đã trả lời ngày 1 tháng 11 năm 2011 lúc 15:17Amber

Có lẽ lấy nền+nền ra khỏi

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

  
No padding
  

    No padding here
  
  
Also no padding
  

    
  
  
5px padding, which extends the parent element, d'oh!
  

    
  
  
5px padding and -5px margin, this does the trick, almost...
  

    
  

  
10px padding and -10px margin, things are falling apart on the right side
  

    
  

  
 10px padding and box-sizing: border-box
  

    
  

1

Đã trả lời ngày 4 tháng 9 năm 2009 lúc 7:44