ความกว้าง: อัตโนมัติสำหรับฟิลด์ <input>

123

คำถาม CSS สำหรับมือใหม่ ผมคิดว่าwidth:autoสำหรับdisplay:blockองค์ประกอบความหมาย 'เติมช่องว่างที่มีอยู่' อย่างไรก็ตามสำหรับ<input>องค์ประกอบนี้ดูเหมือนจะไม่เป็นเช่นนั้น ตัวอย่างเช่น:

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

สองคำถามแล้ว:

มีคำจำกัดความว่า width: auto แปลว่าอะไร? ข้อกำหนด CSS ดูเหมือนคลุมเครือสำหรับฉัน แต่บางทีฉันอาจพลาดส่วนที่เกี่ยวข้อง
มีวิธีที่จะบรรลุพฤติกรรมที่ฉันคาดหวังสำหรับช่องป้อนข้อมูลหรือไม่ - เช่น เติมพื้นที่ว่างเช่นองค์ประกอบระดับบล็อกอื่น ๆ ทำอย่างไร

ขอบคุณ!

css

— richb
แหล่งที่มา

อาจมีการป้อนข้อมูล

— Phrogz

@Phrogz ใช่มันซ้ำกัน ฉันค้นหา แต่ไม่พบ ขอบคุณ.

— richb

88

<input>กว้าง 's ถูกสร้างขึ้นจากของsizeแอตทริบิวต์ ค่าเริ่มต้นsizeคือสิ่งที่ขับเคลื่อนความกว้างอัตโนมัติ

คุณสามารถลองดูได้จากwidth:100%ตัวอย่างด้านล่างของฉัน

ไม่เติมความกว้าง:

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

เติมความกว้าง:

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

ขนาดเล็กลงความกว้างน้อยลง:

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

UPDATE

นี่คือสิ่งที่ดีที่สุดที่ฉันทำได้หลังจากผ่านไปไม่กี่นาที ปิด 1px ใน FF, Chrome และ Safari และสมบูรณ์แบบใน IE (ปัญหาคือ # ^ & * IE ใช้เส้นขอบแตกต่างจากคนอื่น ๆ ดังนั้นจึงไม่สอดคล้องกัน)

<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>

— เบน
แหล่งที่มา

24

ขอบคุณ ความกว้าง: 100% ไม่ใช่สิ่งเดียวกัน มันจะล้นกล่องหลักหากมีระยะขอบหรือเส้นขอบ

— richb

1

border:2px inset #eee; margin:-2pxคุณอย่างชัดเจนสามารถตั้งค่าเหล่านี้เพื่อปรับวิธีที่คุณต้องการเช่น ยังไม่ได้ทดสอบด้วยตัวเอง แต่มีบางอย่างตามแนวเหล่านั้น

— เบ็

3

ขอบคุณสตีฟ คุณควรตรวจสอบstackoverflow.com/questions/1030793/…ซึ่งมีแนวคิดที่น่าสนใจอื่น ๆ

— richb

1

โซลูชันมหากาพย์สำหรับความกว้างที่สอดคล้องกันผ่าน css ในช่องอินพุต +1

— Stephen Sprinkle

11

คุณสามารถใช้ set the inputs box-sizing property to border-box เพื่อหยุดไม่ให้เส้นขอบทับซ้อนกับคอนเทนเนอร์

— nicholas

26

"มีคำจำกัดความของความกว้าง: auto หมายความว่าอย่างไรข้อกำหนด CSS ดูเหมือนคลุมเครือสำหรับฉัน แต่บางทีฉันอาจพลาดส่วนที่เกี่ยวข้องไป"

ไม่มีใครตอบคำถามด้านบนของผู้โพสต์ต้นฉบับได้จริง

นี่คือคำตอบ: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

ตราบเท่าที่ค่าของความกว้างเป็นแบบอัตโนมัติองค์ประกอบสามารถมีระยะขอบแนวนอนช่องว่างภายในและเส้นขอบได้โดยไม่ต้องกว้างกว่าคอนเทนเนอร์ ...

ในทางกลับกันหากคุณระบุความกว้าง: 100% ความกว้างทั้งหมดขององค์ประกอบจะเท่ากับ 100% ของบล็อกที่มีอยู่บวกขอบแนวนอนช่องว่างภายในและเส้นขอบ ... นี่อาจเป็นสิ่งที่คุณต้องการ แต่ส่วนใหญ่จะไม่ใช่ .

เพื่อให้เห็นภาพความแตกต่างฉันทำตัวอย่าง: http://www.456bereastreet.com/lab/width-auto/

— คำตอบ
แหล่งที่มา

4

คำตอบ / ลิงค์ที่ดีฉันขอแนะนำให้ใส่ตัวอย่างที่สามด้วย "box-sizeing: border-box" ...

— halfbit

นั่นไม่ใช่สำหรับอินพุตและเนื่องจากอัตโนมัติเป็นค่าเริ่มต้นฉันไม่เห็นว่ามันมีประโยชน์อย่างไร

— Barbz_YHOOL

9

ตามที่ระบุไว้ในคำตอบอื่น ๆ ความกว้าง: อัตโนมัติไม่ทำงานเนื่องจากความกว้างถูกสร้างขึ้นโดยแอตทริบิวต์ขนาดของอินพุตซึ่งไม่สามารถตั้งค่าเป็น "อัตโนมัติ" หรืออะไรก็ได้ที่คล้ายกัน

มีวิธีแก้ปัญหาเล็กน้อยที่คุณสามารถใช้เพื่อทำให้มันเล่นได้ดีกับโมเดลกล่อง แต่ไม่มีอะไรที่ยอดเยี่ยมเท่าที่ฉันรู้

ขั้นแรกคุณสามารถตั้งค่าช่องว่างภายในโดยใช้เปอร์เซ็นต์โดยตรวจสอบให้แน่ใจว่าความกว้างเพิ่มขึ้นถึง 100% เช่น:

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

อีกสิ่งหนึ่งที่คุณอาจลองใช้คือการใช้การวางตำแหน่งที่แน่นอนโดยตั้งค่าซ้ายและขวาเป็น 0 การใช้มาร์กอัปนี้:

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

และ CSS นี้:

fieldset {
  position: relative;
}

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

การวางตำแหน่งสัมบูรณ์นี้จะทำให้อินพุตเต็มชุดฟิลด์แม่ในแนวนอนโดยไม่คำนึงถึงช่องว่างหรือระยะขอบของอินพุต อย่างไรก็ตามข้อเสียอย่างมากคือตอนนี้คุณต้องจัดการกับความสูงของ fieldset ซึ่งจะเป็น 0 เว้นแต่คุณจะตั้งค่าไว้ หากอินพุตของคุณมีความสูงเท่ากันทั้งหมดสิ่งนี้จะเหมาะกับคุณเพียงแค่ตั้งค่าความสูงของ fieldset ให้เท่ากับความสูงของอินพุต

นอกเหนือจากนี้ยังมีโซลูชัน JS บางอย่าง แต่ฉันไม่ชอบใช้สไตล์พื้นฐานกับ JS

— จอน Raasch
แหล่งที่มา

8

เพราะinputของwidthถูกควบคุมโดยมันsizeแอตทริบิวต์นี้เป็นวิธีที่ผมเริ่มต้นinput widthตามเนื้อหา:

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

— Fabricio
แหล่งที่มา

1

แม้ว่า#angularคำตอบเฉพาะนี้จะไม่ใช่คำตอบที่ถูกต้องสำหรับคำถามของ OP (และฉันไม่ได้โหวต) แต่ฉันมาที่หัวข้อนี้เพื่อค้นหาแนวคิดเฉพาะนี้

— nobug

5

มันอาจจะไม่ตรงกับที่คุณต้องการ แต่วิธีแก้ปัญหาของฉันคือใช้การกำหนดสไตล์ autowidth กับ wrapper div จากนั้นตั้งค่าอินพุตของคุณเป็น 100%

— mwilcox
แหล่งที่มา

0

width:100%ตัวเลือกเดียวที่ฉันสามารถคิดจะใช้ หากคุณต้องการเพิ่มช่องว่างในช่องป้อนข้อมูลด้วยเช่นกันแทนที่จะวางภาชนะไว้labelรอบ ๆ ให้ย้ายการจัดรูปแบบไปที่ป้ายนั้นแทนในขณะเดียวกันก็ระบุช่องว่างในป้ายกำกับด้วย ช่องป้อนข้อมูลมีความเข้มงวด

— Lajos Meszaros
แหล่งที่มา

0

คำตอบ 1 - "response" ให้คำตอบ / ลิงค์ที่ดี หากต้องการพูดสั้น ๆ ว่า "อัตโนมัติ" คือค่าเริ่มต้นดังนั้นจึงเหมือนกับการลบการเปลี่ยนแปลงความกว้างขององค์ประกอบ

ตอบ 2 - ใช้width: 100%แทน มันจะเติมเต็ม 100% ของคอนเทนเนอร์หลักในกรณีนี้คือ "แบบฟอร์ม"

— Akhil Gupta
แหล่งที่มา

-4

ลิงค์ที่น่าทึ่งอย่างยิ่งที่อธิบายถึงคุณสมบัติที่น่าทึ่งอย่างแท้จริง:

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

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

สาระสำคัญ:

ใส่องค์ประกอบในภาชนะด้วยdisplay: flex;.
ตั้งค่าflex-grow: 1;ในแต่ละองค์ประกอบที่มีอยู่
หากคุณมีองค์ประกอบภายในองค์ประกอบที่มีอยู่ซึ่งจำเป็นต้องเติบโตให้ทำซ้ำขั้นตอนที่ 1 และ 2 สำหรับองค์ประกอบที่มีและองค์ประกอบลูก (ที่มีอยู่)
ปรับและปรับเปลี่ยนตามความต้องการที่แตกต่างกัน (ดูลิงค์)

แก้ไข - ตัวอย่าง :

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

— แอนดรู
แหล่งที่มา

มันช่วยเรื่องความกว้างอัตโนมัติสำหรับอินพุตได้อย่างไร?

— kernel

@kernel ง่ายๆ. ดูตัวอย่าง

— Andrew

ความกว้างของอินพุตคือ 100% เสมอไม่ใช่น้อยที่สุด

— kernel

2

อินพุตยังคงมีความกว้างไม่เท่ากันกับเนื้อหาซึ่งเป็นคำถาม

— kernel

หากคุณอ่านคำตอบที่ได้รับการยอมรับและทุกคนก็ตอบได้ว่ามันจะแตกต่าง คำถามก็คือ "คุณทำอะไรถูกที่ทุกคนทำผิด".

— kernel