วิธีสร้างความกว้างขององค์ประกอบ: 100% ลบด้วยการเติมเต็ม?

ฉันมีอินพุต html

อินพุตมีpadding: 5px 10px;ฉันต้องการให้เป็น 100% ของความกว้าง div ของผู้ปกครอง (ซึ่งเป็นของเหลว)

อย่างไรก็ตามการใช้width: 100%;ทำให้อินพุตเป็น100% + 20pxฉันจะหลีกเลี่ยงสิ่งนี้ได้อย่างไร

ตัวอย่าง

box-sizing: border-box เป็นวิธีที่รวดเร็วและง่ายต่อการแก้ไข:

สิ่งนี้จะใช้ได้กับเบราว์เซอร์รุ่นใหม่และ IE8 +

นี่คือตัวอย่าง: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

เวอร์ชันที่นำหน้าเบราว์เซอร์ ( -webkit-box-sizingฯลฯ ) ไม่จำเป็นต้องใช้ในเบราว์เซอร์สมัยใหม่

นี่คือเหตุผลที่เรามีbox-sizingใน CSS

ฉันได้แก้ไขตัวอย่างของคุณแล้วและตอนนี้ก็ใช้งานได้ใน Safari, Chrome, Firefox และ Opera ลองดูสิ: http://jsfiddle.net/mathias/Bupr3/ ทั้งหมดที่ฉันเพิ่มคือ:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

น่าเสียดายที่เบราว์เซอร์รุ่นเก่าเช่น IE7 ไม่รองรับสิ่งนี้ หากคุณกำลังมองหาโซลูชันที่ใช้งานได้กับ IEs รุ่นเก่าลองดูคำตอบอื่น ๆ

ใช้การขยายเป็นเปอร์เซ็นต์และลบออกจากความกว้าง:

การขยาย: 5%;
ความกว้าง: 90%;

คุณสามารถทำมันได้โดยไม่ต้องใช้box-sizingและไม่ชัดเจนwidth~=99%แก้ปัญหาเช่น

สาธิตบน jsFiddle :

• เก็บของpaddingและborder
• เพิ่มในการป้อนข้อมูลเชิงลบแนวนอนmargin= border-width+horizontal padding
• เพิ่มใน wrapper ของอินพุตตามแนวนอนpaddingเท่ากับmarginจากขั้นตอนก่อนหน้า

HTML มาร์กอัป:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

ใช้ css calc ()

ง่ายและสุดยอดมาก

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

เท่าที่เห็นที่นี่: ความกว้าง Div 100% ลบจำนวนพิกเซลคงที่
โดย webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
แหล่งต้นฉบับ: http://web-profile.com.ua/css/dev/css กว้าง-100prc-ลบ 100px /

เพิ่งคัดลอกนี่ตรงนี้เพราะฉันเกือบจะพลาดในหัวข้ออื่น

สมมติว่าฉันอยู่ในคอนเทนเนอร์ที่มีช่องว่างภายใน 15px นี่คือสิ่งที่ฉันมักจะใช้สำหรับส่วนด้านใน:

width:auto;
right:15px;
left:15px;

ที่จะยืดส่วนด้านในให้กว้างเท่าที่ควรจะน้อยกว่า 15px ทั้งสองข้าง

คุณสามารถลองใช้เทคนิคการวางตำแหน่ง คุณสามารถใส่อินพุตใน div ด้วยposition: relativeและความสูงคงที่จากนั้นในอินพุตมีposition: absolute; left: 0; right: 0;และช่องว่างภายในที่คุณต้องการ

ตัวอย่างสด

นี่คือคำแนะนำจากcodeontrack.comซึ่งมีตัวอย่างโซลูชันที่ดี:

แทนที่จะตั้งค่าความกว้างของ div เป็น 100% ให้ตั้งเป็น auto และตรวจสอบให้แน่ใจว่า<div>ตั้งค่าเป็น display: block (ค่าเริ่มต้นสำหรับ<div>)

ย้ายช่องว่างภายใน 'ไปยังองค์ประกอบตัวหุ้ม

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

ดูตัวอย่างได้ที่นี่: http://jsfiddle.net/L7wYD/1/

เพียงแค่เข้าใจความแตกต่างระหว่างความกว้าง: อัตโนมัติ และความกว้าง: 100%; ความกว้าง: อัตโนมัติ; จะ (อัตโนมัติ) MATICALLY คำนวณความกว้างเพื่อให้พอดีกับที่ได้รับจากการห่อรวมถึงการแพ็ด ความกว้าง 100% ขยายความกว้างและเพิ่มการเสริมเต็ม

สิ่งที่เกี่ยวกับการห่อไว้ในภาชนะ คอนเทนเนอร์ shoud มีสไตล์ที่ชอบ:

{
    width:100%;
    border: 10px solid transparent;
}

ลองสิ่งนี้:

width: 100%;
box-sizing: border-box;

สำหรับฉันใช้margin:15px;padding:10px 0 15px 23px;width:100%ผลลัพธ์คือนี่:

วิธีการแก้ปัญหาสำหรับฉันคือการใช้แทนwidth:auto width:100%รหัสใหม่ของฉันคือ:

margin:15px;padding:10px 0 15px 23px;width:auto. จากนั้นองค์ประกอบจัดตำแหน่งอย่างถูกต้อง:

ฉันมีปัญหาเดียวกัน แก้ไขเช่น:

width: 100%;
box-sizing: border-box;

คุณสามารถทำได้:

width: auto;
padding: 20px;