تحديد موضع أزرار الاختيار والتسميات على نفس السطر

في نماذج HTML، يمكن محاذاة أزرار الاختيار والتسميات المرتبطة بها على سطر واحد صعبة. ولتحقيق ذلك، يمكن استخدام العديد من تقنيات CSS.

تضع بنية HTML المقترحة التسمية وعناصر الإدخال:

First Item

لمحاذاتها أفقيًا، أضف قواعد CSS التالية:

label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}

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

    Thing 1
    Thing 2
  

باستخدام قواعد CSS المناسبة، سيتم محاذاة أزرار الاختيار والتسميات على نفس السطر.