ช่องว่างภายในอินพุตแบ่งความกว้าง 100%

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

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

ดูสิ่งนี้: http://sandman.net/test/formcss.html

อินพุตที่สองมีช่องว่างภายในตั้งไว้ที่ 5px ซึ่งฉันชอบการตั้งค่าเริ่มต้นมาก แต่น่าเสียดายที่ทำให้อินพุตเพิ่มขึ้น 10px ในทุกทิศทางรวมถึงการเพิ่ม 10px ให้กับความกว้าง 100%

ปัญหาคือฉันไม่สามารถเพิ่มองค์ประกอบลูกในอินพุตได้ดังนั้นฉันจึงไม่สามารถแก้ไขได้ ดังนั้นคำถามคือ:

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

ใช้ CSS3 คุณสามารถใช้คุณสมบัติกล่องขนาดที่จะปรับเปลี่ยนวิธีการเบราว์เซอร์คำนวณความกว้างของการป้อนข้อมูล

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

คุณสามารถอ่านเพิ่มเติมได้ที่นี่: http://css-tricks.com/box-sizing/

ฉันไม่รู้ว่ามันเข้ากันได้กับเบราว์เซอร์ข้ามอย่างไร (ใช้งานได้ใน Firefox และซาฟารี) แต่คุณสามารถลองวิธีนี้:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(โพสต์เฉพาะค่าที่ฉันเปลี่ยนแปลง)

เลือกหนึ่งคือการห่อINPUTในDIVที่มีช่องว่างภายใน

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

ผู้ที่หลงลืมcalcสามารถมาช่วยเหลือได้ที่นี่:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

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

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

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

padding ของ 8px เพื่อรวมเส้นขอบและช่องว่างภายในของ input / textarea หวังว่านี่จะช่วยได้!

บางทีใช้เส้นขอบ + พื้นหลังปิดinputและใส่ไว้ในdivขอบ + พื้นหลังและความกว้างแทน: 100% และตั้งค่าระยะขอบบนinput?

ทางออกหนึ่งที่ฉันพบว่าได้ผลคือวางตำแหน่งอินพุตด้วยแท็กหลักที่อยู่ในตำแหน่งที่ค่อนข้างแน่นอน

<p class="full-width-input">
    <input type="text" class="text />
</p>

ใช้สไตล์:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

สิ่งเดียวที่ต้องระวังคือแท็กย่อหน้าต้องมีการตั้งค่าความสูงเนื่องจากเด็กที่อยู่ในตำแหน่งที่แน่นอนจะไม่ขยายความสูง วิธีนี้ช่วยหลีกเลี่ยงความจำเป็นในการตั้งค่าwidth: 100%โดยการล็อกไว้ทางด้านซ้ายและด้านขวาขององค์ประกอบหลัก

ลองใช้เปอร์เซ็นต์สำหรับการเติมของคุณ:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

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

สิ่งเดียวที่ฉันรู้เพื่อป้องกันสิ่งนี้คือกำหนดค่าแบบนั้น 100% -10 แต่มันมีปัญหาความเข้ากันได้บางอย่าง