Phần tử đầu vào HTML rộng hơn Chứa Div

Question

Tôi có phần tử html nằm trong div. Chiều cao được dictated bởi div bên ngoài và chiều cao và chiều rộng của điều khiển đầu vào là 100%. Ở cấp độ cơ bản nhất, tôi gặp sự cố khi hộp văn bản mở rộng qua bên phải của div chứa.

dụ cơ bản mã:

<div style="height:25px; width: 150px;"> 
    <input type="text" style="height:100%; width:100%" /> 
</div> 

Hình dựng tầm kiểm soát này là phức tạp hơn này, nhưng vẫn còn khi điều khiển được rút gọn đến mức này, tôi có một vấn đề mà các hộp nhô ra quá khứ chứa div.

Answer 1

Thay vì áp dụng phong cách trực tiếp trên các yếu tố đầu vào, có thể tóm tắt CSS vào một tập tin và sử dụng các lớp:

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
} 

div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 

<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

Tôi đang chạy ra khỏi cửa trước khi tôi có thể kiểm tra nếu điều này giúp chút nào, nhưng ít nhất, bạn có thể chơi với các thiết lập max-height/width trên DIV css để làm cho nó không bị hỏng nếu giải pháp của tôi không hoạt động. Và việc CSS được trừu tượng hóa như thế này sẽ giúp bạn giải quyết vấn đề dễ dàng hơn bằng cách sử dụng một plugin như Firebug trong Firefox.

Câu hỏi là có cần phải kèm theo thẻ đầu vào trong DIV riêng của nó không? Tôi sẽ không ngạc nhiên nếu chỉ có bố cục tốt hơn bạn có thể xây dựng để tránh nhu cầu thực hiện việc này ...

Answer 2

Tôi giả định rằng bạn muốn phần tử có chứa (<input>) nhỏ hơn hoặc chứa hoàn toàn bên trong, <div>?

Bạn có thể:

input {width: 50%; /* or whatever */ } 

rộng Một html phần tử được tính toán (tôi nghĩ) là chiều rộng định nghĩa + giáp + biên độ + đệm

Nếu bạn đã xác định đầu vào là có 100% chiều rộng của phụ huynh, và sau đó các thuộc tính khác được thêm vào nó chắc chắn sẽ tràn div cha mẹ.

Bạn có thể đặt lề/đệm/đường viền thành 0, nhưng điều đó có thể sẽ không ổn. Vì vậy, nó là dễ dàng hơn, mặc dù không nhất thiết phải hoàn hảo, chỉ để sử dụng một chiều rộng phù hợp nhỏ hơn.

Bạn có thể, tất nhiên, sử dụng

#parent_div {overflow: hidden; /* or 'auto' or whatever */} 

để ẩn một phần của yếu tố đầu vào mà thông thường sẽ tràn div container.

Answer 3

không may điều này sẽ phụ thuộc vào trình duyệt bạn đang làm việc nhưng thiết lập chiều rộng của đối tượng (hộp văn bản) không tính đến chiều rộng của đường viền trên đối tượng. hầu hết các trình duyệt chỉ xem xét bất kỳ đệm từ đối tượng bên ngoài và lề từ đối tượng chứa nhưng một vài (tôi đang nhìn bạn IE) không thêm vào biên giới khi tính toán tỷ lệ phần trăm;

đặt cược tốt nhất của bạn là thay đổi biên giới trên hộp hoặc để ném trong một div giữa teh textbox và container với một đệm của tiếng nói 2px với một margin-top: -2px và margin-left:-2px (tôi đoán ở chiều rộng biên giới)

Answer 4

Tôi biết bài đăng này khá cũ, nhưng đó là vấn đề phổ biến và không ai đăng bất kỳ câu trả lời hay nào ...

Mã HTML sau có vẻ ổn. Nhưng khi tôi thêm các loại tài liệu, vấn đề xuất hiện

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

Để khắc phục vấn đề chiều rộng/chiều cao, bạn có thể thêm padding để field_container của bạn, nhưng điều đó sẽ làm cho các thùng chứa lớn hơn.

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    padding-right: 4px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

Nếu bạn không thể thay đổi chiều rộng container, bạn cũng có thể sử dụng các thủ thuật sau đây, nhưng điều đó vẫn sẽ làm tăng chiều cao

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div> 
</div> 

Answer 5

Bạn có thể sử dụng hộp-sizing: border-hộp chăm sóc điều này. Chỉ cần đặt những điều sau vào tệp css của bạn:

input{box-sizing:border-box} 

Điều này có nghĩa là đường viền trên hộp nhập thực sự nằm trong chiều rộng của đầu vào chứ không phải được thêm vào bên ngoài. Đây là những gì đang làm cho đầu vào lớn hơn container.

Paul Irish có bài thực sự tốt giải thích kỹ thuật này http://paulirish.com/2012/box-sizing-border-box-ftw

Những điểm ông làm khoảng đệm cũng được áp dụng cho biên giới.

Thậm chí còn có mixin la bàn để giúp việc hỗ trợ các trình duyệt cũ trở nên dễ dàng hơn. (http://compass-style.org/reference/compass/css3/box_sizing/)

Answer 6

Điều này làm công việc cho tôi:

input { 
    padding: 0.2em; 
    box-sizing: border-box; 
    width: 100% 
}