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

Question

Ok, vì vậy chúng tôi biết rằng việc đặt đệm vào một đối tượng làm cho chiều rộng của nó thay đổi ngay cả khi đượ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ố. Đối với hầu hết các trường hợp, bạn chỉ cần thêm phần tử con và thêm phần đệm vào phần tử con thay vì phần tử con được đặt thành 100%, nhưng đối với đầu vào biểu mẫu, đó không phải là bước có thể.

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

Các đầu vào thứ hai đã đệm của nó thiết lập để 5px mà tôi rất thích các thiết lập mặc định. Nhưng tiếc là 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 phần tử con bên trong đầu vào để tôi không thể sửa lỗi đó. Vì vậy, câu hỏi là:

Có cách nào để thêm đệ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ị trong các bố cục có chiều rộng khác nhau nên tôi không biết trước chiều rộng của bố mẹ.

Answer 1

Tôi không biết làm thế nào qua trình duyệt tương thích đó là (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)

Answer 2

Đ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ư vậy 100% -10. Nhưng nó có một số vấn đề tương thích tho.

Answer 3

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

Answer 4

Một tùy chọn là quấn INPUT trong một số DIV có phần đệ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> 

Answer 5

Tôi đã gặp một số vấn đề với một cái gì đó tương tự như sau. Tôi có tds với đầu vào 100% và một padding 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%; 
} 

đệm 8px để bao gồm đường viền và đệm của đầu vào/văn bản. Hy vọng điều này sẽ hữu ích!

Answer 6

Một giải pháp mà tôi đã tìm được công trình 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> 

Các áp dụng các 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 phải nhận thức được là thẻ đoạn cần có một chiều cao thiết lập như những đứa trẻ hoàn toàn vị trí 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 thiết lập width: 100% bằng cách khóa nó vào bên trái và bên phải của phần tử gốc.

Answer 7

Sử dụng CSS3 bạn có thể sử dụng thuộc tính kích thước hộp để thay đổi cách trình duyệt tính toán với đầ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/

Answer 8

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

Answer 9

Các oft-quên calc có thể đến để giải cứu ở đây:

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

Vì chúng ta biết padding sẽ thêm vào chiều rộng của nguyên tố này, chúng tôi chỉ đơn giản là trừ đi đệm 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, và không yêu cầu divs wrapper lộn xộn.