ما الذي يمنع عنصر الإدخال الخاص بي من الظهور كعنصر كتلة؟

Question

http://jsfiddle.net/aam7J/

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

Answer 1

أستخدم "الاختراق" لحساب عرض حدود الإدخال بشيء من هذا القبيل ...

<div>hello world</div>
​
<div class="adjustForTheInputBorder">
    <input type="text" />
</div>


input 
{
    width:100%; 
    border-width:2px; 
}

div.adjustForTheInputBorder
{ 
    margin-right: 4px;  /* or 2x whatever your input border width is */
}

div 
{
    background-color: pink;
}

لي adjustForTheInputBorder يميل الفصل إلى أن يكون له اسم ينقل بشكل أكثر ملاءمة كراهيتي لـ CSS ...:)

ملاحظة. div يجعل كما display:block بشكل افتراضي، لا تحتاج إلى ذلك هناك.