ฉันสามารถหยุดกล่องข้อความความกว้าง 100% ไม่ให้ขยายออกไปนอกคอนเทนเนอร์ได้หรือไม่

181

ให้บอกว่าฉันมีกล่องข้อความที่ฉันต้องการเติมทั้งบรรทัด ฉันจะทำให้มันมีสไตล์เช่นนี้:

input.wide {display:block; width: 100%}

สิ่งนี้ทำให้เกิดปัญหาเนื่องจากความกว้างขึ้นอยู่กับเนื้อหาของกล่องข้อความ กล่องข้อความมีระยะขอบเส้นขอบ & ช่องว่างภายในโดยค่าเริ่มต้นซึ่งทำให้กล่องข้อความความกว้าง 100% มีขนาดใหญ่กว่าคอนเทนเนอร์

ตัวอย่างเช่นที่นี่ทางด้านขวา:

ป้อนคำอธิบายรูปภาพที่นี่

มีวิธีใดที่จะทำให้กล่องข้อความเติมความกว้างของคอนเทนเนอร์โดยไม่ขยายออกไป?

นี่คือตัวอย่าง HTML เพื่อแสดงสิ่งที่ฉันหมายถึง:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

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

html css

— แดนเฮอร์เบิร์ต
แหล่งที่มา

87

สิ่งที่คุณสามารถทำได้คือการลบ "พิเศษ" เริ่มต้นในinput:

input.wide {display:block; width:100%;padding:0;border-width:0}

นี้จะเก็บinputภายในภาชนะ ตอนนี้ถ้าคุณไม่ต้องการพรมแดนห่อinputในdivมีเส้นขอบบนdiv(วิธีการที่คุณสามารถเอาdisplay:blockจากinputเกินไป) สิ่งที่ต้องการ:

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

แก้ไข: อีกตัวเลือกหนึ่งคือแทนที่จะลบสไตล์ออกจากinputค่าชดเชยในสไตล์ที่มีการครอบdiv:

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

สิ่งนี้จะให้ผลลัพธ์ที่แตกต่างกันบ้างในเบราว์เซอร์ที่แตกต่างกัน แต่จะไม่ทับซ้อนกับคอนเทนเนอร์ ค่าใน div ขึ้นอยู่กับว่าขอบมีขนาดใหญ่เพียงใดinputและเท่าใดคุณต้องการพื้นที่ระหว่างinputและขอบ

— Hilbrand Bouwkamp
แหล่งที่มา

3

นี่เป็นทางออกที่สร้างสรรค์มาก ปัญหาเดียวที่ฉันมีคือฉันไม่สามารถกำหนดเค้าร่างบนกล่องข้อความเมื่อได้รับโฟกัสเว้นแต่ฉันใช้ JavaScript เพื่อเปลี่ยนเส้นขอบของ div wrapper

— Dan Herbert

@DanHerbert คุณพูดถูกนี่เป็นข้อบกพร่องของ UX ที่สำคัญของวิธีนี้

— Baumr

275

มีวิธีใดที่จะทำให้กล่องข้อความเติมความกว้างของคอนเทนเนอร์โดยไม่ขยายออกไป?

ใช่: ด้วยการใช้คุณสมบัติ CSS3 'box-sizing: border-box' คุณสามารถกำหนดความหมายของ 'width' อีกครั้งเพื่อรวมช่องว่างภายนอกและเส้นขอบ

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

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

ทางเลือกโรงเรียนเก่าคือการใส่จำนวน 'padding-right' ในองค์ประกอบ <div> หรือ <td> ที่มีค่าเท่ากับจำนวน padding / border ซ้ายและขวาเสริมใน 'px' ที่คุณคิดว่าเบราว์เซอร์จะ ให้อินพุต (โดยปกติ 6px สำหรับ IE <8.)

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

สิ่งนี้จะใช้งานได้ดียกเว้นไม่สามารถใช้สิ่งนี้ได้เพราะฉันกำหนดเป้าหมายอุปกรณ์มือถือซึ่งอาจไม่รองรับสิ่งนี้เป็นเวลาหลายปี : - \

— Dan Herbert

20

ฉันคิดว่าอุปกรณ์มือถือจะรองรับ HTML5 เต็มรูปแบบก่อนคอมพิวเตอร์

— Mariano Cavallo

4

@Kindred: ไม่แน่นอนถ้าคุณรวม IEMobile และ Blackberry ไว้ด้วย

— bobince

1

นี้ได้รับการสนับสนุนที่ดีสำหรับเบราว์เซอร์สก์ท็อปแม้ว่า: quirksmode.org/css/contents.html

— Logan

2

ฉันใช้เวลานานขนาดนี้ในการค้นหา buttersauce ที่ยอดเยี่ยมนี้ได้อย่างไร? เราช่วยตอบคำถามนี้ให้เป็นที่ยอมรับได้ไหม?

— Streetlogics

14

วิธีนี้แก้ไขปัญหาให้ฉันได้!

โดยไม่จำเป็นต้องมี div ภายนอก เพียงนำไปใช้กับกล่องข้อความของคุณ

box-sizing: border-box;

ด้วยคุณสมบัตินี้ "คุณสมบัติความกว้างและความสูง (และคุณสมบัติขั้นต่ำ / สูงสุด) รวมถึงเนื้อหาการขยายและขอบ แต่ไม่ใช่ระยะขอบ"

ดูคำอธิบายของคุณสมบัติที่w3schools w3schools

หวังว่านี่จะช่วยใครซักคน!

— Jack Trowbridge
แหล่งที่มา

เรียบง่ายอย่างน่าอัศจรรย์! ขอบคุณ!

— nurider

10

เพิ่งเจอปัญหานี้ด้วยตัวเองและวิธีแก้ปัญหาเดียวที่ฉันพบว่าใช้ได้กับเบราว์เซอร์ทดสอบทั้งหมดของฉัน (IE6, IE7, Firefox) คือ:

ล้อมรอบฟิลด์อินพุตในสอง DIV แยกกัน
ตั้งค่า DIV ด้านนอกให้กว้าง 100% ซึ่งจะเป็นการป้องกันไม่ให้คอนเทนเนอร์ของเราล้นเอกสาร
ใส่ช่องว่างใน DIV ด้านในของจำนวนเงินที่แน่นอนเพื่อชดเชยการล้นแนวนอนของอินพุต
ตั้งค่าช่องว่างภายในที่กำหนดเองบนอินพุตดังนั้นจึงล้นตามจำนวนเดียวกันกับที่ฉันอนุญาตใน DIV ด้านใน

รหัส:

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

ที่นี่โอเวอร์โฟลว์แนวนอนทั้งหมดสำหรับองค์ประกอบอินพุตคือ 6px - 2x (ช่องว่างภายใน + ขอบ) - ดังนั้นเราจึงตั้งค่าช่องว่างภายในสำหรับ DIV ภายใน 6px

— โทเบียสโคเฮน
แหล่งที่มา

เพิ่มองค์ประกอบเข้าที่ขยาย 8px และมันไม่ทำงานอีกต่อไป

— JuHwon

7

การรองรับขนาดกล่องค่อนข้างดีจริง: http://caniuse.com/#search=box-sizing

ดังนั้นหากคุณไม่ได้ตั้งเป้าหมาย IE7 คุณควรจะสามารถแก้ไขปัญหาประเภทนี้ได้โดยใช้คุณสมบัตินี้ เลเยอร์เช่น sass หรือน้อยกว่าทำให้ง่ายต่อการจัดการกฎที่มีคำนำหน้าเช่นนั้น btw

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

3

ที่จริงแล้วมันเป็นเพราะ CSS กำหนด 100% เทียบกับความกว้างทั้งหมดของภาชนะรวมถึงระยะขอบชายแดนและช่องว่างภายใน นั่นหมายความว่าพื้นที่ว่าง เนื้อหามีจำนวนน้อยกว่า 100% เว้นแต่คอนเทนเนอร์จะไม่มีระยะขอบชายแดนหรือช่องว่างภายใน

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

โปรดทราบว่าระยะขอบของเขตข้อมูลข้อความเส้นขอบและช่องว่างภายในจะรวมอยู่ในขนาด CSS ที่ระบุไว้ซึ่งเป็นขนาดของคอนเทนเนอร์ที่ใช้ทิ้งสิ่งต่างๆ

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

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

— Lawrence Dol
แหล่งที่มา

1

ทางออกหนึ่งที่อาจใช้งานได้ (เหมาะกับฉัน) คือการใช้ระยะขอบติดลบที่อินพุต (กล่องข้อความ) ... หรือความกว้างคงที่สำหรับ ie7 หรือเพื่อลดการสนับสนุน ie7 นี่ส่งผลให้ความกว้างของพิกเซลสมบูรณ์แบบ .. สำหรับฉันมันคือ 7 ดังนั้นฉันจึงเพิ่ม 3 และ 4 แต่ก็ยังพิกเซลสมบูรณ์แบบ ..

ฉันมีปัญหาเดียวกันและฉันเกลียดที่จะมี div พิเศษสำหรับชายแดน ฯลฯ !

ดังนั้นนี่คือทางออกของฉันซึ่งดูเหมือนว่าจะใช้งานได้!

คุณควรใช้แผ่นชีท ie7 เท่านั้นเพื่อหลีกเลี่ยง starhacks

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

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

1

หากคุณไม่สามารถใช้งานได้box-sizing:border-boxคุณสามารถลองลบwidth:100%และวางsizeคุณลักษณะที่มีขนาดใหญ่มากใน<input>องค์ประกอบข้อเสียเปรียบคือคุณต้องแก้ไข html และไม่สามารถทำได้ด้วย CSS เท่านั้น:

<input size="1000"></input>

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

0

หากคุณไม่จำเป็นต้องทำมันแบบไดนามิก (ตัวอย่างเช่นรูปแบบของคุณมีความกว้างคงที่) คุณสามารถตั้งค่าความกว้างของ<input>องค์ประกอบลูกให้เป็นความกว้างของตู้คอนเทนเนอร์ของพวกเขาลบการตกแต่งใด ๆ เช่นการขยายขอบขอบ ฯลฯ

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

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

0

หากคุณไม่สามารถใช้การปรับขนาดกล่อง (เช่นเมื่อคุณแปลง HTML เป็น PDF โดยใช้ iText) ลองสิ่งนี้:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

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

0

งานนี้:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

'ความกว้าง' ตัวแรกคือกฎทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า

— Mo'in Creemers
แหล่งที่มา

0

เพียงแค่จัดรูปแบบอินพุตเพื่อชดเชยการขยายเพิ่มเติม ในตัวอย่างต่อไปนี้การเติมเต็มของอินพุตจะเป็น 10px ทางซ้ายและขวาสำหรับการชดเชยการรวมทั้งหมดของ 20px:

input[type=text]{
   width: calc(100% - 20px);
}

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