حقل الإدخال بعرض 100% "يصل" إلى المساحة المتروكة

Question

لدي Tablecell مع حقل الإدخال فيه.يجب أن يملأ حقل الإدخال خلية الطاولة ولكن لا يصل إلى المساحة المتروكة لها.ما لدي يبدو مثل هذا (مع Firebug):

أريد أن يظل حقل الإدخال داخل المنطقة الزرقاء وألا يندفع إلى المنطقة الأرجوانية.

و:بالطبع قرأت جميع الأسئلة هنا حول هذا الموضوع أولاً.قرأت كل ذلك ولم أجد أي إجابة تحل ذلك بالفعل.

وينبغي أن تعمل في جميع المتصفحات الحديثة (ie7 كذلك)؛

انا صنعت الحد الأدنى من الأمثلة الحية مع jsfiddle حيث جربت جميع الحلول في الأسئلة الأخرى ولكن لم أتمكن من تشغيل هذا.أ) هل هناك حل عملي لهذا؟ وب) هل هناك حتى حل لطيف وغير بديل لهذا؟

لماذا هذه المشكلة في جميع المتصفحات؟أعتقد أن هذه مواصفات خاطئة في CSS.لأنني إذا قلت "100%" بالطبع أريد أن يتناسب العنصر مع "100%" من منطقة المحتوى. ما هي حالة الاستخدام للسماح لها بالتدفق إلى الحشوات والهوامش؟

Answer 1

حسنًا، تفضل..

أنا أستخدم بالضبط نفس الطريقة هذه الإجابة.

يرى: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

لغة البرمجة:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

Answer 2

المشكلة هنا هي مع نموذج الصندوق، عندما تقول width: 100% فهو يطبق قيمة البكسل بناءً على ما هو متاح (والذي يمكنك رؤيته ضمن خيار "الأنماط المحسوبة" لمفتش الويب).ومع ذلك، تتم إضافة الحشو بعد ذلك إلى هذا العرض، لذا فإن الحشو بمقدار 5 بكسل سيحسب إجمالي عرض 100% + 10 بكسل (5 لكل جانب).

لإصلاح هذه المشكلة، تحتاج إلى إزالة المساحة المتروكة أو دمجها في قيمة العرض.على سبيل المثال:

input { width: 100%; padding: 0; }

أو

input { width: 90%; padding: 0 5%; } /* width totals 100% */

ترث معظم عناصر النموذج، بشكل افتراضي، قدرًا من الحشو؛لذلك، حتى لو لم تكن تطبق الحشو على وجه التحديد على الإدخال، فإنه لا يزال موجودًا لأن المتصفح يضبطه افتراضيًا على وجود الحشو.

Answer 3

أعتقد أنك يجب أن تحاول استخدام

box-sizing: border-box