تحقيق الوضع الأفقي لتسمية النموذج والإدخال على نفس السطر

في تطوير الويب، تعد جماليات النماذج أمرًا بالغ الأهمية لتجربة المستخدم. يمكن أن يؤدي ترتيب التسميات وحقول الإدخال على نفس السطر إلى تحسين إمكانية قراءة النموذج وسهولة استخدامه. تستكشف هذه المقالة كيفية محاذاة عنصر الإدخال بسلاسة مع التسمية الخاصة به، بغض النظر عن طوله.

المحاولات الأولية

أسلوب شائع لمحاذاة التسمية والإدخال على عنصر واحد يتضمن الخط ضبط عرض الإدخال على تلقائي. ومع ذلك، يؤدي هذا غالبًا إلى عرض إدخال ثابت. وبدلاً من ذلك، استخدم width: 100%; ينقل الإدخال إلى سطر جديد، مما يؤدي إلى إنشاء تخطيط غير مرغوب فيه.

الحل: استخدام Span Element مع Hidden Overflow

يتضمن هذا الحل تغليف عنصر الإدخال داخل فترة، مما يؤدي إلى إنها حشوة كافية للحفاظ على موضعها أسفل الملصق. بعد ذلك، يؤدي ضبط الملصق ليطفو إلى اليسار إلى تحويله إلى يسار الامتداد. يؤدي تعيين تجاوز الامتداد إلى مخفي إلى ضمان ملاءمة محتواه بغض النظر عن طوله، وبالتالي إنشاء المحاذاة المطلوبة.

الموضع الأمثل باستخدام العرض: خلية الجدول آخر يستخدم الأسلوب العرض: خلية الجدول لوضع التسمية والإدخال كخلايا جدول. يتطلب ذلك عرض الحاوية كجدول وتحديد عرض الملصق للحفاظ على موضعه أثناء ضبط حشوة الإدخال لتحسين التباعد.

لأول مرة الحل، استخدم كود HTML مثل هذا:

Label

Label

label { تعويم: يسار } فترة { عرض: كتلة؛ الفائض: مخفي؛ الحشو: 0 4 بكسل 0 6 بكسل } مدخل { العرض: 100%

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

    Label
    

.container { عرض: الجدول؛ العرض: 100% } ملصق { العرض: خلية الجدول؛ العرض: 1 بكسل؛ المساحة البيضاء: nowrap } فترة { العرض: خلية الجدول؛ الحشو: 0 0 0 5 بكسل } مدخل { العرض: 100%

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}