html - كلمات - كيفية محاذاة مربعات الاختيار وعلاماتها المتقاطعة باستمرار المتصفحات




كلمات html (20)

هذه واحدة من مشاكل CSS البسيطة التي ابتليت بها باستمرار. كيف يقوم الأشخاص المحيطون بـ Stack Overflow بمحاذاة checkboxes رأسياً وبصورة متقاطعة على تسمياتهم ؟ عندما أقوم بمحاذاةهم بشكل صحيح في Safari (عادةً باستخدام vertical-align: baseline على input ) ، يكونون متوقفين تمامًا في Firefox و IE. إصلاحه في فايرفوكس ، وسافاري و IE لا حتما عابث. أنا أضيع الوقت على هذا في كل مرة أقوم بتدوين نموذج.

إليك الرمز القياسي الذي أعمل معه:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

عادةً ما أستخدم إعادة تعيين Eric Meyer ، لذا فإن عناصر الشكل هي عمليات إلغاء نسبيًا. نتطلع إلى أي نصائح أو الحيل التي لديك لتقدمه!


CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

سيضع الكود أعلاه عناصر القائمة الخاصة بك في threecols ومجرد تغيير العروض لتناسب.


أردت فقط إضافة إلى المناقشة حول السمة 'for' على الملصقات (offtopic قليلاً):

يرجى تقديمه ، حتى عندما لا يكون ضروريًا ، لأنه ملائم جدًا للاستخدام من javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

وهذا أمر أكثر ملاءمة من محاولة معرفة ما إذا كان الملصق يحتوي على مدخلات متداخلة ، أو أن يكون المدخن قبل الملصق ، أو بعد ... إلخ. ولا يؤلمك ذلك.

فقط سنتي 2


إذا كنت تستخدم نماذج ويب ASP.NET فلا داعي للقلق بشأن DIVs والعناصر الأخرى أو الأحجام الثابتة. يمكننا محاذاة النص <asp:CheckBoxList> عن طريق تعيين float:left إلى نوع إدخال CheckboxList في CSS.

يرجى التحقق من كود المثال التالي:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

رمز ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

إذا كنت تستخدم Twitter Bootstrap ، فيمكنك استخدام فئة checkbox على <label> :

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

الآن وقد تم دعم هذا المرن في جميع المتصفحات الحديثة ، يبدو أن مثل هذا الأسلوب يبدو أسهل بالنسبة لي.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>


في ما يلي العرض التجريبي الكامل للإصدار السابق:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}
<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>


الإجابة المختارة بـ 400+ upvotes لم تنجح بالنسبة لي في Chrome 28 OSX ، ربما لأنه لم يتم اختباره في OSX أو أنه عمل في أي شيء كان في عام 2008 عندما تم الإجابة على هذا السؤال.

لقد تغير الزمن ، وأصبحت حلول CSS3 الجديدة ممكنة الآن. يستخدم حل بلدي pseudoelements لإنشاء مربع اختيار مخصص . وبالتالي فإن الشروط (إيجابيات أو سلبيات ، مهما نظرت إليها) هي كما يلي:

  • يعمل فقط في المتصفحات الحديثة (FF3.6 + و IE9 + و Chrome و Safari)
  • تعتمد على مربع اختيار مصمم خصيصًا ، سيتم عرضه تمامًا في كل متصفح / نظام تشغيل. هنا ، اخترت للتو بعض الألوان البسيطة ، ولكن يمكنك دائمًا إضافة تدرجات خطية ، وذلك لإعطائها المزيد من الدوي.
  • يتم توجيهه إلى حجم خط / خط معين ، والذي إذا تم تغييره ، فستقوم ببساطة بتغيير موضع وحجم مربع الاختيار لجعله يبدو محاذاً عموديًا. إذا تم تعديلها بشكل صحيح ، يجب أن تظل النتيجة النهائية قريبة تمامًا من جميع أنظمة المتصفح / التشغيل.
  • لا خصائص المحاذاة العمودية ، لا يطفو
  • يجب أن تستخدم الترميز المقدم في المثال الخاص بي ، ولن يعمل إذا كان منظمًا مثل السؤال ، ومع ذلك ، سيبدو المخطط بشكل أساسي كما هو. إذا كنت ترغب في تحريك الأشياء ، عليك أيضًا نقل CSS المرتبط

HTML الخاص بك:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

CSS الخاص بك:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

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

jsFiddle: http://jsfiddle.net/SgXYY/6/

وإذا كنت مهتمًا ، فإليك ميزة أزرار الاختيار على: http://jsfiddle.net/DtKrV/2/

أملي أن يجد هذا نفعا!


العمل من حل One Crayon ، لدي شيء يعمل بالنسبة لي وهو أبسط:

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] {
  bottom: 2px;
}
<label>
  <input type="checkbox">
  Label text
</label>

يجسد بكسل للبيكسل نفسه في سفاري (الذي أؤكد خط الأساس الخاص بي) وكلا من فايرفوكس و IE7 تحقق من جيدة. وهو يعمل أيضًا مع أحجام الخطوط المتعددة ، الكبيرة والصغيرة. الآن ، لتحديد خط الأساس ل IE على اختيار والمدخلات ...


بعد أكثر من ساعة من التغيير والتبديل وتجربة أنماط مختلفة من العلامات ، أعتقد أنه قد يكون لدي حل لائق. متطلبات هذا المشروع بالتحديد كانت:

  1. يجب أن تكون المدخلات على خط خاص بهم.
  2. تحتاج مدخلات مربع الاختيار إلى المواءمة عموديًا مع نص التسمية بشكل مشابه (إن لم يكن متطابقًا) عبر جميع المتصفحات.
  3. إذا كان نص التسمية يلتف ، فيجب وضع مسافة بادئة له (لذلك لا يوجد التفاف أسفل خانة الاختيار).

قبل الدخول في أي تفسير ، سأعطيك الرمز:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

هنا مثال العمل في JSFiddle .

يفترض هذا الرمز أنك تستخدم إعادة تعيين مثل Eric Meyer التي لا تتخطى هوامش إدخال النموذج والحشو (ومن ثم يتم تعيين الهامش وإعادة تعيين المساحة في CSS المدخلات). من الواضح أنه في بيئة مباشرة ، قد يكون من الممكن أن تقوم بتعشيق / تجاوز الأشياء لدعم عناصر الإدخال الأخرى ، لكني أردت أن أبقي الأمور بسيطة.

أشياء يجب ملاحظتها:

  • إعلان *overflow هو اختراق إنترنت مضمّنة (الاختراق بين النجم والممتلكات). سيلاحظها كل من IE 6 و 7 ، ولكن Safari و Firefox سيتم تجاهلهما بشكل صحيح. أعتقد أنه قد يكون CSS صالحًا ، ولكنك لا تزال في وضع أفضل بفضل التعليقات المشروطة ؛ استخدمته ببساطة للبساطة.
  • كما أظن أن أفضل ما يمكنني قوله ، كانت عبارة vertical-align الوحيدة التي كانت متسقة عبر المتصفحات هي vertical-align: bottom . تعيين هذا الوضع ثم تحديد موضعه صعودًا نسبيًا تقريبًا في Safari و Firefox و IE مع بكسل أو اثنين فقط من التناقض.
  • المشكلة الرئيسية في العمل مع المحاذاة هي أن IE تلتقط مجموعة من الفضاء الغامض حول عناصر الإدخال. انها ليست الحشو أو الهامش ، وملعون دائم. يؤدي تعيين العرض والارتفاع في مربع الاختيار ثم overflow: hidden التخزينية overflow: hidden لسبب ما إلى قطع المساحة الإضافية ويتيح وضع IE لتعمل بشكل مشابه تمامًا مع Safari و Firefox.
  • اعتمادًا على حجم النص الخاص بك ، ستحتاج بلا شك إلى ضبط الوضع النسبي والعرض والارتفاع وما إلى ذلك حتى تبدو الأمور في نصابها الصحيح.

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


جرب الحل الخاص بي ، لقد جربته في IE 6 و FF2 و Chrome ، حيث يتم عرض وحدات البكسل بالبكسل في جميع المتصفحات الثلاثة.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>


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

input {
    vertical-align: -2px;
}

Reference


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

أنا أيضا في نهاية المطاف القيام بذلك في تطوير winforms ، لنفس السبب. أعتقد أن المشكلة الأساسية في التحكم في خانة الاختيار هي أنه بالفعل عنصران مختلفان: الصندوق والتسمية. باستخدام مربع اختيار ، يتم ترك الأمر لمنفذي عنصر التحكم ليقرر كيف يتم عرض هذين العنصرين بجانب بعضهما البعض (ويخطاها دائمًا ، حيث الخطأ = ليس ما تريده).

آمل حقًا أن يكون لدى شخص ما إجابة أفضل على سؤالك.


في بعض الأحيان ، تحتاج المحاذاة العمودية إلى عنصرين مضمّنين ​​(span ، label ، input ، etc ...) بجانب بعضها البعض للعمل بشكل صحيح. تتم توسيط مربعات الاختيار التالية بشكل رأسي بشكلٍ صحيح في IE و Safari و FF و Chrome ، حتى إذا كان حجم النص صغيرًا جدًا أو كبيرًا جدًا.

تطفو جميعها بجانب بعضها البعض على نفس السطر ، ولكن في الوقت الحالي تعني أن نص العلامة بالكامل يبقى دائمًا بجوار مربع الاختيار.

الجانب السلبي هو علامات SPAN بلا معنى إضافي.

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

الآن ، إذا كان لديك نص تسمية طويل جدًا يحتاج إلى الالتفاف دون التفاف ضمن مربع الاختيار ، فستستخدم الحشو والمسافة البادئة للنص السلبي على عناصر التسمية:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


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

لقد اكتشفت أن vertical-align: sub تجعل vertical-align: sub مربعات الاختيار تبدو جيدة بما فيه الكفاية في محاذاة كروم ، فايرفوكس وأوبرا. لا يمكن التحقق من Safari حيث لم يكن لدي MacOS و IE10 بعيدًا بعض الشيء ، ولكنني وجدت أنه حل جيد بما يكفي بالنسبة لي.

قد يكون هناك حل آخر لمحاولة إنشاء CSS محدد لكل متصفح وضبطه باستخدام بعض المحاذاة العمودية في٪ / pixels / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/


لم أقم باختبار الحل الخاص بي بالكامل ، ولكن يبدو أنه يعمل بشكل رائع.

ملف HTML الخاص بي هو ببساطة:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

أقوم بعد ذلك بتعيين كل مربعات الاختيار على 24px لكل من العرض والارتفاع. لجعل محاذاة النص ، اجعل line-height التسمية أيضًا 24px ، وقم بتعيين vertical-align: top; مثل ذلك:

تحرير: بعد اختبار IE أضفت vertical-align: bottom; إلى المدخلات وغيرت CSS في التسمية. قد تجد أنك تحتاج إلى حالة شرطية css مشروطة لفرز padding - ولكن النص ومربع مضمنة.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

إذا وجد أي شخص أن هذا لا يعمل ، فالرجاء إخبارنا بذلك. هنا هو في العمل (في Chrome و IE - الاعتذار كما اتخذت لقطات على شبكية العين واستخدام أوجه الشبه ل IE):


من خلال مربع اختيار نوع المدخلات الذي تم لفه داخل الملصق وتم تعويمه إلى اليسار كما يلي:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

هذا العمل بالنسبة لي:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

تأكد من أن ارتفاع الارتفاع مماثل لارتفاع خط مستوى (المستوى المرتفع).


نعم شكرا! هذا أيضا كان يدفعني إلى الأبد المكسرات.

في حالتي الخاصة ، عملت هذه بالنسبة لي:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

أستخدم reset.css التي قد تفسر بعض الاختلافات ، ولكن يبدو أن هذا يعمل جيدًا بالنسبة لي.


ﻟذﻟك أﻋﻟم أن ھذا ﻗد ﺗم اﻹﺟﺎﺑﺔ ﻋﻟﯾﮫ ﻋدة ﻣرات ، وﻟﮐﻧﻧﻲ أﺷﻌر ﺑﺄن ﻟدي ﺣﻼً أﮐﺛر اﻧﻔﺗﺎﺣًﺎ ﻣن اﻷﻧظﻣﺔ اﻟﺗﻲ ﻗدﻣت ﺑﺎﻟﻔﻌل. وليس فقط 1 حل أنيق ، ولكن 2 حلول منفصلة لدغدغ الهوى الخاص بك. مع ذلك ، كل ما تحتاج إلى معرفته ورؤيته موجود في 2 JS Fiddle ، مع التعليقات.

يعتمد الحل رقم 1 على "مربع اختيار" الأصلي للمتصفح المعطى ، على الرغم من وجود لمسة ... يحتوي على قسم يسهل تحديد موضعه عبر المتصفح ، مع تجاوز السعة: مخبأة لتقطيع فائض مربع 1x متمدد (هذا هو ذلك لا يمكنك رؤية الحدود القبيحة FF)

HTML بسيط: (اتبع الرابط لمراجعة CSS مع التعليقات ، كتلة الكود هو إرضاء ) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

يستخدم الحل رقم 2 "Checkbox Toggle Hack" لتبديل حالة CSS الخاصة بـ DIV ، والتي تم وضعها بشكل صحيح عبر المتصفح ، والإعداد باستخدام رمز متحرك بسيط لمربع الاختيار غير محدد ومحدّد. كل ما نحتاجه هو ضبط وضع الخلفية مع صندوق Checkbox Toggle Hack. هذا ، في رأيي ، هو الحل الأكثر أناقة لأن لديك مزيدًا من التحكم في خانات الاختيار وأجهزة الراديو ، ويمكن أن تضمن أنها تبدو متشابهة عبر المتصفح.

HTML بسيط: (اتبع الرابط لمراجعة CSS مع التعليقات ، كتلة التعليمات البرمجية هي لتلبية ) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

إذا كان هناك من يختلف مع هذه الطرق ، يرجى ترك تعليق لي ، أود أن أسمع بعض التعليقات حول لماذا لا يصادف الآخرون هذه الحلول ، أو إذا كان لديهم ، لماذا لا أرى إجابات هنا بشأنهم؟ إذا رأى أي شخص أن إحدى هذه الطرق تفشل ، سيكون من الجيد أن ترى ذلك أيضًا ، ولكن تم اختبارها في أحدث المتصفحات والاعتماد على أساليب HTML / CSS القديمة جدًا ، وعالمية بقدر ما رأيت.


position: relative; لديه بعض المشاكل في IE مع z-index والرسوم المتحركة مثل slide_own / slideDown الخاص بـ jQuery.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

مسج:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

ربما يحتاج التصميم إلى التعديلات بناءً على حجم الخط المستخدم في <label>

PS:
أنا استخدم ie7js لجعل العمل المغلق في IE6.


input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>


<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

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

وبالتالي

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

ربما تحتاج إلى تعيين الحدود ، المخطط التفصيلي وارتفاع الخط على كلاهما أيضًا للحلول عبر المتصفح / الوسائط.





html-form