width: tự động cho các trường <input>

122

Câu hỏi CSS dành cho người mới. Tôi nghĩ width:autocho một display:blockphần tử có nghĩa là 'lấp đầy không gian có sẵn'. Tuy nhiên, đối với một <input>phần tử, điều này dường như không đúng. Ví dụ:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Hai câu hỏi sau đó:

Có định nghĩa chính xác về width: auto nghĩa là gì không? Thông số CSS có vẻ mơ hồ đối với tôi, nhưng có lẽ tôi đã bỏ qua phần liên quan.
Có cách nào để đạt được hành vi mong đợi của tôi cho một trường đầu vào - tức là. lấp đầy không gian có sẵn như các phần tử cấp khối khác làm gì?

Cảm ơn!

css

— richb
nguồn

có thể trùng lặp đầu vào với hiển thị: khối không phải là khối, tại sao không?

— Phrogz

@Phrogz Vâng, nó là một bản sao. Tôi đã tìm kiếm nhưng không tìm thấy nó. Cám ơn.

— richb,

88

<input>Chiều rộng của An được tạo ra từ sizethuộc tính của nó . Giá trị mặc định sizelà chiều rộng tự động.

Bạn có thể thử width:100%như minh họa trong ví dụ của tôi bên dưới.

Không lấp đầy chiều rộng:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Chiều rộng điền:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Kích thước nhỏ hơn, chiều rộng nhỏ hơn:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

CẬP NHẬT

Đây là điều tốt nhất tôi có thể làm sau vài phút. Nó giảm 1px trong FF, Chrome và Safari, và hoàn hảo trong IE. (Vấn đề là # ^ & * IE áp dụng đường viền khác với những người khác nên nó không nhất quán.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Ben
nguồn

24

Cảm ơn. chiều rộng: 100% không phải là thứ giống nhau tho. Nó sẽ tràn hộp mẹ nếu có lề hoặc viền.

— richb,

1

Bạn rõ ràng có thể thiết lập các điều chỉnh như thế nào bạn muốn, ví dụ border:2px inset #eee; margin:-2px. Tôi đã không tự mình kiểm tra nó nhưng một cái gì đó dọc theo những dòng đó.

— Ben

3

Cảm ơn Steve. Bạn cũng nên xem stackoverflow.com/questions/1030793/… có một số ý tưởng thú vị khác.

— richb

1

Giải pháp sử thi cho độ rộng nhất quán thông qua css trên các trường đầu vào, +1

— Stephen Rắc

11

bạn có thể sử dụng đặt thuộc tính kích thước hộp đầu vào thành hộp viền để ngăn đường viền chồng lên vùng chứa.

— nicholas

26

"Có định nghĩa chính xác về chiều rộng: tự động có nghĩa là gì không? Thông số CSS có vẻ mơ hồ đối với tôi, nhưng có lẽ tôi đã bỏ lỡ phần liên quan."

Không ai thực sự trả lời phần trên của câu hỏi của người đăng ban đầu.

Đây là câu trả lời: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Miễn là giá trị của chiều rộng là tự động, phần tử có thể có lề ngang, phần đệm và đường viền mà không trở nên rộng hơn vùng chứa của nó ...

Mặt khác, nếu bạn chỉ định chiều rộng: 100%, tổng chiều rộng của phần tử sẽ bằng 100% khối chứa nó cộng với bất kỳ lề ngang, phần đệm và đường viền nào ... Đây có thể là những gì bạn muốn, nhưng rất có thể không phải .

Để hình dung sự khác biệt, tôi đã làm một ví dụ: http://www.456bereastreet.com/lab/width-auto/

— phản ứng
nguồn

4

thoải mái trả lời / link, tôi đề nghị để đặt một ví dụ thứ ba với "hộp-sizeing: border-box" ...

— halfbit

đó không phải cho một đầu vào và kể từ ô tô là mặc định, tôi không thấy làm thế nào nó có hữu ích

— Barbz_YHOOL

9

Như đã nêu trong câu trả lời khác, width: auto không hoạt động do chiều rộng được tạo bởi thuộc tính size của đầu vào, không thể được đặt thành "auto" hoặc bất kỳ thứ gì tương tự.

Có một số cách giải quyết bạn có thể sử dụng để khiến nó hoạt động tốt với mô hình hộp, nhưng không có gì tuyệt vời theo như tôi biết.

Trước tiên, bạn có thể đặt phần đệm trong trường bằng cách sử dụng tỷ lệ phần trăm, đảm bảo rằng chiều rộng thêm lên đến 100%, ví dụ:

input {
  width: 98%;
  padding: 1%;
}

Một điều khác bạn có thể thử là sử dụng định vị tuyệt đối, với trái và phải được đặt thành 0. Sử dụng đánh dấu này:

<fieldset>
    <input type="text" />
</fieldset>

Và CSS này:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Vị trí tuyệt đối này sẽ khiến đầu vào lấp đầy tập trường mẹ theo chiều ngang, bất kể phần đệm hoặc lề của đầu vào. Tuy nhiên, một nhược điểm lớn của điều này là bây giờ bạn phải xử lý chiều cao của tập trường, sẽ là 0 trừ khi bạn đặt nó. Nếu tất cả các đầu vào của bạn có cùng chiều cao, điều này sẽ phù hợp với bạn, chỉ cần đặt chiều cao của tập trường thành bất kỳ chiều cao nào của đầu vào.

Ngoài ra, có một số giải pháp JS, nhưng tôi không thích áp dụng kiểu cơ bản với JS.

— Jon Raasch
nguồn

8

Bởi vì input's widthđược kiểm soát bởi sizethuộc tính của nó , đây là cách tôi khởi tạo một input widththeo nội dung của nó:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
nguồn

1

Mặc dù #angularcâu trả lời cụ thể này không phải là câu trả lời hợp lệ cho câu hỏi của OP (và tôi không ủng hộ), tôi đã đến chủ đề này chỉ để tìm ý tưởng cụ thể này.

— nobug

5

Nó có thể không phải là chính xác những gì bạn muốn, nhưng cách giải quyết của tôi là áp dụng kiểu tự động chiều rộng cho một div trình bao bọc - sau đó đặt đầu vào của bạn thành 100%.

— mwilcox
nguồn

0

Lựa chọn duy nhất tôi có thể nghĩ đến là sử dụng width:100%. Nếu bạn cũng muốn có một phần đệm trên trường nhập, thay vì chỉ đặt một vùng chứa labelxung quanh nó, hãy di chuyển định dạng đến nhãn đó, đồng thời chỉ định phần đệm cho nhãn. Các trường đầu vào cứng nhắc.

— Lajos Meszaros
nguồn

0

Câu trả lời 1 - "phản hồi" đã đưa ra một câu trả lời / liên kết tốt cho nó. Nói một cách ngắn gọn, "auto" là mặc định, vì vậy nó giống như loại bỏ bất kỳ thay đổi nào về chiều rộng của một phần tử

Câu trả lời 2 - sử dụng width: 100%thay thế. Nó sẽ lấp đầy 100% vùng chứa mẹ, trong trường hợp này là "biểu mẫu".

— Akhil Gupta
nguồn

-4

Các liên kết hoàn toàn tuyệt vời mô tả một tính năng tuyệt vời tuyệt đối:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Ý chính:

Đặt các phần tử vào một vùng chứa với display: flex; .
Bộ flex-grow: 1; trên mỗi phần tử được chứa.
Nếu bạn có các phần tử bên trong các phần tử được chứa đó cũng cần phát triển, hãy lặp lại bước 1 và 2 cho các phần tử được chứa và các phần tử con (được chứa) của chúng.
Thích ứng và điều chỉnh theo nhu cầu khác nhau (xem liên kết).

Chỉnh sửa - ví dụ :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrew
nguồn

Điều đó giúp ích như thế nào với chiều rộng tự động cho đầu vào?

— kernel

@kernel Đơn giản. Xem ví dụ.

— Andrew

Chiều rộng của đầu vào luôn là 100% và không phải là nhỏ nhất có thể.

— kernel

2

Đầu vào vẫn không có cùng chiều rộng với nội dung của nó, đó là một câu hỏi.

— kernel

Nếu bạn đọc câu trả lời được chấp nhận - và cả của những người khác - thì câu trả lời sẽ khác. Khi đó câu hỏi sẽ là "bạn đang làm gì đúng mà mọi người làm sai?".

— kernel