นี่เป็นหนึ่งในปัญหาเล็ก ๆ น้อย ๆ ของ CSS ที่ทำให้ฉันมีปัญหาตลอดเวลา คนรอบกองซ้อนล้นแนวตั้งcheckboxesและข้ามเบราว์เซอร์labelsอย่างต่อเนื่องได้อย่างไร เมื่อใดก็ตามที่ฉันจัดแนวพวกเขาอย่างถูกต้องใน Safari (มักใช้บน) พวกเขาจะปิดใน Firefox และ IE อย่างสมบูรณ์ แก้ไขใน Firefox และ Safari และ IE จะสับสนอย่างหลีกเลี่ยงไม่ ฉันเสียเวลากับเรื่องนี้ทุกครั้งที่ฉันกรอกแบบฟอร์มvertical-align: baselineinput

นี่คือรหัสมาตรฐานที่ฉันใช้:

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

ฉันมักจะใช้การรีเซ็ตของ Eric Meyer เพื่อให้องค์ประกอบของฟอร์มค่อนข้างชัดเจนในการแทนที่ รอคอยที่จะมีเคล็ดลับหรือลูกเล่นที่คุณมีให้!

หลังจากผ่านไปหนึ่งชั่วโมงของการปรับแต่งทดสอบและลองใช้มาร์กอัปในรูปแบบที่แตกต่างกันฉันคิดว่าฉันอาจมีทางออกที่ดี ข้อกำหนดสำหรับโครงการนี้โดยเฉพาะคือ:

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's ซึ่งไม่ได้แทนที่แบบฟอร์มการป้อนข้อมูลและการเว้นระยะห่าง (ซึ่งจะทำให้การตั้งค่าการเว้นวรรคและการเติมช่องว่างใน CSS ใส่) เห็นได้ชัดว่าในสภาพแวดล้อมแบบสดคุณอาจจะทำรัง / เอาชนะสิ่งต่างๆเพื่อสนับสนุนองค์ประกอบอินพุตอื่น ๆ แต่ฉันต้องการทำให้สิ่งต่าง ๆ เรียบง่าย

สิ่งที่ควรทราบ:

• การ*overflowประกาศเป็นแฮ็ค IE แบบอินไลน์ (แฮ็คคุณสมบัติของดาว) ทั้ง IE 6 และ 7 จะสังเกตเห็นได้ แต่ Safari และ Firefox จะไม่สนใจมัน ฉันคิดว่ามันอาจเป็น CSS ที่ถูกต้อง แต่คุณยังดีกว่าด้วยความคิดเห็นตามเงื่อนไข ใช้เพื่อความเรียบง่าย
• ดีที่สุดเท่าที่ผมสามารถบอกได้เพียงคำสั่งที่มีความสอดคล้องเป็นเบราว์เซอร์vertical-align vertical-align: bottomการตั้งค่านี้และการวางตำแหน่งที่ค่อนข้างสูงกว่านั้นมีลักษณะคล้ายกันใน Safari, Firefox และ IE ด้วยความคลาดเคลื่อนเพียงพิกเซลหรือสอง
• ปัญหาที่สำคัญในการทำงานกับการจัดตำแหน่งคือ IE ติดตั้งพื้นที่ลึกลับไว้รอบ ๆ องค์ประกอบอินพุต มันไม่ใช่การขยายหรือเว้นระยะและมันก็คงอยู่นาน การตั้งค่าความกว้างและความสูงในช่องทำเครื่องหมายจากนั้นoverflow: hiddenด้วยเหตุผลบางอย่างตัดพื้นที่พิเศษและช่วยให้การวางตำแหน่งของ IE ในการทำหน้าที่คล้ายกันมากกับ Safari และ Firefox
• ไม่ต้องสงสัยเลยว่าคุณจะต้องปรับตำแหน่งสัมพัทธ์ความกว้างความสูงและอื่น ๆ ทั้งนี้ขึ้นอยู่กับขนาดข้อความของคุณ

หวังว่านี่จะช่วยคนอื่นได้! ฉันไม่ได้ลองเทคนิคเฉพาะนี้ในโครงการอื่น ๆ นอกเหนือจากที่ฉันทำในเช้าวันนี้ดังนั้นแน่นอนว่าถ้าคุณพบบางสิ่งที่ทำงานได้อย่างต่อเนื่อง

บางครั้งการจัดตำแหน่งแนวตั้งต้องการองค์ประกอบอินไลน์ (ขยาย, ฉลาก, อินพุต, ฯลฯ ... ) สององค์ประกอบถัดจากกันเพื่อให้ทำงานได้อย่างถูกต้อง ช่องทำเครื่องหมายต่อไปนี้จัดกึ่งกลางแนวตั้งอย่างถูกต้องใน IE, Safari, FF และ Chrome แม้ว่าขนาดตัวอักษรจะเล็กหรือใหญ่มาก

พวกมันทั้งหมดลอยอยู่ติดกันในบรรทัดเดียวกัน แต่ nowrap หมายความว่าข้อความฉลากทั้งหมดจะอยู่ติดกับช่องทำเครื่องหมาย

ข้อเสียคือแท็ก SPAN ที่ไม่มีความหมายพิเศษ

.checkboxes label {
  display: inline-block;
  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;
  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 so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</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>

ทำงานด้วยวิธีแก้ปัญหา One Crayon ของฉันมีบางสิ่งที่เหมาะกับฉันและง่ายขึ้น:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

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>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

แสดงผลพิกเซลต่อพิกเซลเหมือนกันใน Safari (ซึ่งฉันเชื่อว่าพื้นฐาน) และทั้ง Firefox และ IE7 ดูดี นอกจากนี้ยังใช้งานได้กับขนาดแบบอักษรของป้ายชื่อต่าง ๆ ทั้งใหญ่และเล็ก ตอนนี้สำหรับการแก้ไขพื้นฐานของ IE ในการเลือกและอินพุต ...

อัปเดต: (แก้ไขบุคคลที่สาม)

bottomตำแหน่งที่เหมาะสมนั้นขึ้นอยู่กับแบบอักษรและแบบอักษร! ฉันพบว่าใช้bottom: .08em;ช่องทำเครื่องหมาย & องค์ประกอบวิทยุเป็นค่าทั่วไปที่ดี ฉันทดสอบใน Chrome / Firefox / IE11 ใน windows ด้วยแบบอักษร Arial & Calibri โดยใช้ขนาดตัวอักษรเล็ก / กลาง / ใหญ่

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

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

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

สิ่งหนึ่งที่ง่ายที่ดูเหมือนว่าจะทำงานได้ดีคือการใช้การปรับตำแหน่งแนวตั้งของช่องทำเครื่องหมายด้วยการจัดแนวตั้ง มันจะยังคงแตกต่างกันไปในเบราว์เซอร์ แต่การแก้ปัญหาจะไม่ซับซ้อน

input {
    vertical-align: -2px;
}

การอ้างอิง

ลอง vertical-align: middle

รหัสของคุณดูเหมือนว่าควรจะเป็น:

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

ลองวิธีแก้ปัญหาของฉันฉันลองใน 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[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

ทดสอบวันนี้ใน Chrome, Firefox, Opera, IE 7 และ 8 ตัวอย่าง: Fiddle

ฉันยังไม่ได้ทดสอบโซลูชันของฉันอย่างสมบูรณ์ แต่ดูเหมือนว่าจะทำงานได้ดี

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 ของ IE ที่มีเงื่อนไขเพื่อแยกการขยาย - แต่ข้อความและกล่องเป็นแบบอินไลน์

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;
}

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

หากใครพบว่าสิ่งนี้ไม่ได้ผลโปรดแจ้งให้เราทราบ นี่คือการใช้งานจริง (ใน Chrome และ IE - ขอโทษเนื่องจากภาพหน้าจอถูกถ่ายในเรตินาและใช้แนวขนานสำหรับ IE):

ฉันมักจะใช้ความสูงของเส้นเพื่อปรับตำแหน่งแนวตั้งของข้อความคงที่ของฉัน:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

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

หวังว่าจะช่วย

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

เคล็ดลับคือการใช้การจัดตำแหน่งแนวตั้งเฉพาะในเซลล์ตารางหรือบล็อกแบบอินไลน์หากใช้แท็กป้ายกำกับ

ในที่สุดเรามาดูสาเหตุของปัญหา

ช่องทำเครื่องหมายจะแสดงผลโดยใช้ภาพ (หนึ่งอาจกำหนดให้คนที่กำหนดเองผ่าน CSS) นี่คือช่องทำเครื่องหมาย (ไม่ทำเครื่องหมาย) ใน FireFox เน้นด้วยตัวตรวจสอบ DOM:

และนี่คือช่องทำเครื่องหมายที่ไม่มีรูปแบบเดียวกันใน Chrome:

คุณสามารถเห็นระยะขอบ (สีส้ม); ไม่มีช่องว่างภายใน (จะแสดงเป็นสีเขียว) ดังนั้นอัตรากำไรหลอกแบบนี้ที่ด้านขวาและด้านล่างของช่องทำเครื่องหมายคืออะไร? เหล่านี้เป็นส่วนหนึ่งของภาพที่ใช้สำหรับช่อง นั่นเป็นสาเหตุที่การใช้vertical-align: middleไม่พอเพียงและเป็นสาเหตุของปัญหาข้ามเบราว์เซอร์

แล้วเราจะทำอย่างไรกับเรื่องนี้?

ตัวเลือกหนึ่งที่ชัดเจนคือ - แทนที่ภาพ! โชคดีที่เราสามารถทำสิ่งนี้ผ่าน CSS และแทนที่พวกเขาด้วยภาพภายนอก, base64 ภาพ (ใน CSS), in-CSS svg หรือเพียงแค่องค์ประกอบหลอก มันเป็นวิธีที่มีประสิทธิภาพ (ข้ามเบราว์เซอร์!) และนี่คือตัวอย่างของการปรับเช่นนี้ที่ถูกขโมยไปจากคำถามนี้ :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

คุณอาจต้องการที่จะอ่านรายละเอียดเพิ่มเติมบางบทความในเชิงลึกเกี่ยวกับการจัดแต่งทรงผมอย่างเช่นบางที่ระบุไว้ที่นี่ ; มันอยู่นอกขอบเขตของคำตอบนี้

ตกลงยังไงเกี่ยวกับโซลูชันที่ไม่มีภาพที่กำหนดเองหรือองค์ประกอบหลอก?

TL; DR: ดูเหมือนว่าจะใช้งานไม่ได้ให้ใช้ช่องทำเครื่องหมายที่กำหนดเองแทน

อันดับแรกให้สังเกตว่าหากในเบราว์เซอร์อื่น ๆ ที่มีช่องว่างหลอกภายในไอคอนช่องทำเครื่องหมายไม่มีกฎเกณฑ์ที่สอดคล้องกัน ในการสร้างเราต้องสำรวจกายวิภาคของภาพดังกล่าวในเบราว์เซอร์ที่มีอยู่

ดังนั้นเบราว์เซอร์ใดที่มีระยะหลอกในช่องทำเครื่องหมาย ฉันได้ตรวจสอบ Chrome 75, Vivaldi 2.5 (ใช้ Chromium), FireFox 54 (ไม่ต้องถามว่าเพราะเหตุใดล้าสมัยเช่นนี้) IE 11, Edge 42, Safari ?? (ยืมมาหนึ่งนาทีลืมที่จะตรวจสอบเวอร์ชั่น) มีเพียง Chrome และ Vivaldi เท่านั้นที่มีอัตราหลอกหลอก (ฉันสงสัยว่าเบราว์เซอร์ที่ใช้โครเมียมทั้งหมดเช่นโอเปร่า)

ขนาดของมาร์จิ้นหลอกมีขนาดเท่าไหร่ ในการคิดออกนี้สามารถใช้ช่องทำเครื่องหมายซูม:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

ผลลัพธ์ของฉันคือ ~ 7% ของความกว้าง / ความสูงและด้วยเหตุนี้ 0.9-1.0px ในหน่วยสัมบูรณ์ ความถูกต้องอาจถูกตั้งคำถามแม้ว่า: ลองค่าที่แตกต่างกันของzoomสำหรับช่องทำเครื่องหมาย ในการทดสอบของฉันทั้งใน Chrome และ Vivaldi ขนาดสัมพัทธ์ของ pseudo-margin นั้นแตกต่างกันมากที่zoomค่า 10, 20 และที่ 11-19 (??):

scale ดูเหมือนจะสอดคล้องกันมากขึ้น:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

ดังนั้นอาจ ~ 14% และ 2px เป็นค่าที่ถูกต้อง

ตอนนี้เรารู้ขนาดของ pseudo-margin แล้ว (โปรดทราบว่านี่ยังไม่เพียงพอ ขนาดของไอคอนช่องทำเครื่องหมายเหมือนกันสำหรับเบราว์เซอร์ทั้งหมดหรือไม่ อนิจจา นี่คือสิ่งที่ผู้ตรวจสอบ DOM แสดงสำหรับช่องทำเครื่องหมายที่ไม่มีรูปแบบ:

• FireFox: 13.3px
• ใช้โครเมียม: 12.8pxสำหรับทุกสิ่งดังนั้น 12.8 (100% - 14%) = 11pxสำหรับสิ่งที่มองเห็นเป็นช่องทำเครื่องหมาย
• IE 11, Edge: 13px
• Safari: n / a (สิ่งเหล่านี้ควรนำมาเปรียบเทียบในหน้าจอเดียวกันฉันเชื่อ)

ตอนนี้ก่อนที่เราจะหารือเกี่ยวกับการแก้ปัญหาหรือลูกเล่นลองถาม: การจัดแนวที่ถูกต้องคืออะไร? เราพยายามทำอะไรให้สำเร็จ ถึงจุดหนึ่งมันเป็นเรื่องของรสนิยม แต่โดยพื้นฐานแล้วฉันสามารถคิดถึงแง่มุมของการจัดแนว "ดี" ต่อไปนี้:

ข้อความและช่องทำเครื่องหมายบนพื้นฐานเดียวกัน (ฉันตั้งใจไม่ปรับขนาดช่องทำเครื่องหมายที่นี่):

หรือมีเส้นตรงกลางในรูปของตัวอักษรตัวเล็ก:

หรือบรรทัดกลางเดียวกันในรูปตัวพิมพ์ใหญ่ (ง่ายกว่าที่จะเห็นความแตกต่างของขนาดตัวอักษรที่แตกต่างกัน):

และเราต้องตัดสินใจด้วยว่าขนาดของช่องทำเครื่องหมายควรเท่ากับความสูงของตัวอักษรตัวพิมพ์เล็กตัวพิมพ์ใหญ่หรืออย่างอื่น (ใหญ่กว่าเล็กกว่าหรือเล็กกว่าหรือเล็กกว่า)

สำหรับการสนทนานี้ขอเรียกการจัดตำแหน่งที่ดีถ้าช่องทำเครื่องหมายอยู่บนพื้นฐานเดียวกันกับข้อความและมีขนาดของตัวอักษรพิมพ์ใหญ่ (ตัวเลือกที่มีเนื้อหาสูง):

ตอนนี้เราต้องใช้เครื่องมืออะไร:

1. ปรับขนาดช่องทำเครื่องหมาย
2. รับรู้ Chromium ด้วยช่องทำเครื่องหมายหลอกและกำหนดสไตล์ที่เฉพาะเจาะจง
3. ปรับช่องทำเครื่องหมาย / การจัดตำแหน่งแนวตั้งฉลาก

?

1. เกี่ยวกับการปรับขนาดช่องทำเครื่องหมาย : มีwidth, height, size, zoom, scale(ได้ฉันพลาดอะไรบางอย่าง?) zoomและscaleไม่อนุญาตให้ตั้งขนาดที่แน่นอนดังนั้นจึงอาจช่วยในการปรับขนาดข้อความเท่านั้นไม่ได้ตั้งค่าขนาดเบราว์เซอร์ข้าม (ยกเว้นกรณีที่เราสามารถเขียนกฎเฉพาะเบราว์เซอร์) sizeใช้งานไม่ได้กับ Chrome (ใช้งานได้กับ IE เก่าหรือไม่มันไม่น่าสนใจ) widthและheightทำงานใน Chrome และเบราว์เซอร์อื่น ๆ ดังนั้นเราจึงสามารถตั้งค่าขนาดทั่วไป แต่อีกครั้งใน Chrome จะกำหนดขนาดของภาพทั้งหมดไม่ใช่ช่องทำเครื่องหมายตัวเอง หมายเหตุ: เป็นขั้นต่ำ (ความกว้างความสูง) ซึ่งกำหนดขนาดของช่องทำเครื่องหมาย (หากความกว้าง≠ความสูงพื้นที่ด้านนอกกล่องกาเครื่องหมายสี่เหลี่ยมจะถูกเพิ่มเข้าไปใน "pseudo-margin")

   สิ่งที่โชคร้ายคือช่องว่างหลอกใน Chrome ไม่ได้ถูกตั้งค่าเป็นศูนย์สำหรับความกว้างและความสูงใด ๆ เท่าที่ฉันเห็น

2. ฉันกลัวไม่มีความน่าเชื่อถือวิธี CSS เท่านั้นวันนี้

3. ลองพิจารณาการจัดตำแหน่งแนวตั้ง vertical-alignไม่สามารถให้ผลลัพธ์ที่สอดคล้องกันเมื่อตั้งค่าเป็นmiddleหรือbaselineเนื่องจาก pseudo-margin ของ Chrome ตัวเลือกเดียวเท่านั้นที่จะได้รับ "ระบบพิกัด" ที่เหมือนกันสำหรับเบราว์เซอร์ทั้งหมดคือจัดแนวป้ายกำกับและอินพุตให้กับtop:

   

   (ในภาพ: จัดแนวตั้ง: ด้านบน, ด้านล่างและด้านล่างโดยไม่ต้องกล่องเงา)

แล้วเราจะได้ผลลัพธ์อะไรจากเรื่องนี้?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

ตัวอย่างด้านบนทำงานร่วมกับ Chrome (เบราว์เซอร์ที่ใช้ Chromium) แต่เบราว์เซอร์อื่น ๆ ต้องการช่องทำเครื่องหมายที่มีขนาดเล็กกว่า ดูเหมือนว่าจะเป็นไปไม่ได้ที่จะปรับทั้งขนาดและการจัดแนวตั้งในลักษณะที่ทำงานกับมุมมองภาพของช่องทำเครื่องหมายของ Chromium คำแนะนำสุดท้ายของฉันคือ: ใช้ช่องทำเครื่องหมายที่กำหนดเองแทน - และคุณจะหลีกเลี่ยงความยุ่งยาก :)

ขณะนี้ flexbox ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมดแล้วบางอย่างเช่นนี้ดูเหมือนเป็นวิธีที่ง่ายกว่าสำหรับฉัน

<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>

ฉันคิดว่านี่เป็นวิธีที่ง่ายที่สุด

input {
    position: relative;
    top: 1px;
}

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

ฉันไม่ชอบการวางตำแหน่งแบบญาติเนื่องจากมันทำให้องค์ประกอบแสดงผลเหนือสิ่งอื่นใดในระดับ (อาจสูงกว่าบางอย่างหากคุณมีเลย์เอาต์ที่ซับซ้อน)

ฉันค้นพบแล้วว่าvertical-align: subช่องทำเครื่องหมายดูดีในแนวเดียวกับ Chrome, Firefox และ Opera ไม่สามารถตรวจสอบ Safari ได้เนื่องจากฉันไม่มี MacOS และ IE10 ปิดอยู่เล็กน้อย แต่ฉันพบว่ามันเป็นทางออกที่ดีพอสำหรับฉัน

วิธีแก้ไขปัญหาอื่นอาจลองและสร้าง CSS เฉพาะสำหรับเบราว์เซอร์ทุกตัวและปรับแต่งด้วยการจัดแนวแนวตั้งใน% / pixels / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

มันใช้งานได้ดีสำหรับฉัน:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

คำตอบที่เลือกพร้อม 400 upvote ไม่ได้ผลสำหรับฉันใน Chrome 28 OSX อาจเป็นเพราะมันไม่ได้ทดสอบใน OSX หรือว่าทำงานในสิ่งที่อยู่รอบตัวในปี 2008 เมื่อตอบคำถามนี้

เวลามีการเปลี่ยนแปลงและโซลูชัน CSS3 ใหม่เป็นไปได้แล้ว วิธีการแก้ปัญหาของฉันใช้pseudoelementsเพื่อสร้างช่องทำเครื่องหมายที่กำหนดเอง ดังนั้นข้อตกลง (ข้อดีหรือข้อเสีย แต่คุณดูมัน) มีดังนี้:

• ใช้งานได้เฉพาะในเบราว์เซอร์ที่ทันสมัย ​​(FF3.6 +, IE9 +, Chrome, Safari)
• อาศัยช่องทำเครื่องหมายที่ออกแบบเองซึ่งจะแสดงผลเหมือนกันทุกเบราว์เซอร์ / ระบบปฏิบัติการ ที่นี่ฉันเพิ่งเลือกสีที่เรียบง่าย แต่คุณสามารถเพิ่มการไล่ระดับสีเชิงเส้นได้ตลอดและเพื่อให้ได้สีที่มากกว่า
• ถูกปรับให้มีขนาดแบบอักษร / แบบอักษรที่แน่นอนซึ่งหากมีการเปลี่ยนแปลงคุณเพียงแค่เปลี่ยนการวางตำแหน่งและขนาดของช่องทำเครื่องหมายเพื่อให้ปรากฏในแนวตั้ง หากปรับแต่งอย่างถูกต้องผลลัพธ์ที่ได้ควรอยู่ใกล้กับผลลัพธ์เดียวกันในเบราว์เซอร์ / ระบบปฏิบัติการทั้งหมด
• ไม่มีคุณสมบัติการจัดตำแหน่งแนวตั้งไม่มีลอย
• ต้องใช้มาร์กอัปที่มีให้ในตัวอย่างของฉันมันจะไม่ทำงานหากมีโครงสร้างเหมือนคำถามอย่างไรก็ตามโครงร่างจะมีลักษณะเหมือนกัน หากคุณต้องการย้ายสิ่งต่าง ๆ คุณจะต้องย้าย 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;
}

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

วิธีนี้จะซ่อนกล่องกาเครื่องหมายและเพิ่มและกำหนดรูปแบบปลอมแปลงให้กับฉลากเพื่อสร้างช่องทำเครื่องหมายที่มองเห็นได้ เนื่องจากป้ายกำกับเชื่อมโยงกับช่องทำเครื่องหมายที่ซ่อนอยู่ฟิลด์อินพุตจะยังคงได้รับการอัปเดตและค่าจะถูกส่งไปพร้อมกับฟอร์ม

และหากคุณสนใจนี่คือปุ่มตัวเลือกของฉัน: http://jsfiddle.net/DtKrV/2/

หวังว่าใครบางคนพบว่ามีประโยชน์นี้!

ฉันไม่เคยมีปัญหากับการทำเช่นนี้:

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

ถ้าคุณใช้เว็บฟอร์ม ASP.NETคุณไม่จำเป็นต้องกังวลเกี่ยวกับ DIV และองค์ประกอบอื่น ๆ หรือขนาดคงที่ เราสามารถจัดแนว<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>

ด้วยช่องทำเครื่องหมายประเภทการป้อนข้อมูลห่อภายในฉลากและลอยไปทางซ้ายเช่น:

<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;
}

ตรวจสอบให้แน่ใจว่าความสูงของจะเหมือนกับความสูงบรรทัดของ (blocklevel)

ฮาร์ดโค้ดความสูงและความกว้างของช่องทำเครื่องหมายเอาช่องว่างออกและทำให้ความสูงและระยะขอบแนวตั้งเท่ากับความสูงบรรทัดของฉลาก หากข้อความป้ายกำกับเป็นแบบอินไลน์ให้ทำเครื่องหมายที่ช่องทำเครื่องหมายลอย Firefox, Chrome และ IE7 + ทั้งหมดแสดงตัวอย่างต่อไปนี้เหมือนกัน: http://www.kornea.com/css-checkbox-align

ฉันมักจะออกจากช่องทำเครื่องหมายไม่มีป้ายกำกับแล้วทำให้ "ฉลาก" เป็นองค์ประกอบแยกต่างหาก มันเป็นความเจ็บปวด แต่มีความแตกต่างข้ามเบราว์เซอร์ระหว่างวิธีการแสดงเครื่องหมายและป้ายกำกับของพวกเขา (ดังที่คุณสังเกตเห็น) ว่านี่เป็นวิธีเดียวที่ฉันจะเข้าใกล้การควบคุมว่าทุกอย่างจะมีลักษณะอย่างไร

ฉันยังลงเอยด้วยการทำเช่นนี้ในการพัฒนา winforms ด้วยเหตุผลเดียวกัน ฉันคิดว่าปัญหาพื้นฐานกับตัวควบคุมช่องทำเครื่องหมายคือมันเป็นตัวควบคุมสองแบบที่แตกต่างกันจริงๆ: กล่องและฉลาก ด้วยการใช้ช่องทำเครื่องหมายคุณจะปล่อยให้ผู้พัฒนาระบบควบคุมตัดสินใจว่าองค์ประกอบทั้งสองนั้นจะแสดงถัดจากกันและกัน (และพวกมันมักจะผิดพลาดโดยที่ไม่ถูกต้อง = ไม่ใช่สิ่งที่คุณต้องการ)

ฉันหวังว่าบางคนจะมีคำตอบที่ดีกว่าสำหรับคำถามของคุณ

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 และเพียงเปลี่ยนความกว้างให้เหมาะสม

ข้อมูลต่อไปนี้ให้ความสอดคล้องของพิกเซลในเบราว์เซอร์แม้ IE9:

วิธีการนี้ค่อนข้างมีเหตุผลจนถึงจุดที่เห็นได้ชัด:

1. สร้างอินพุตและเลเบล
2. แสดงเป็นบล็อกเพื่อให้คุณสามารถลอยได้ตามต้องการ
3. ตั้งค่าความสูงและความสูงบรรทัดเป็นค่าเดียวกันเพื่อให้แน่ใจว่าอยู่ตรงกลางและจัดแนวตั้ง
4. สำหรับการวัดค่าem ในการคำนวณความสูงขององค์ประกอบเบราว์เซอร์จะต้องทราบความสูงของแบบอักษรสำหรับองค์ประกอบเหล่านั้นและจะต้องไม่ถูกตั้งค่าในการวัดค่า em

ผลลัพธ์นี้เป็นกฎทั่วไปที่บังคับใช้ทั่วโลก:

input, label {display:block;float:left;height:1em;line-height:1em;}

ด้วยขนาดตัวอักษรที่ปรับได้ต่อแบบฟอร์ม fieldset หรือองค์ประกอบ

#myform input, #myform label {font-size:20px;}

ทดสอบใน Chrome, Safari และ Firefox ล่าสุดบน Mac, Windows, Iphone และ Android และ IE9

วิธีนี้น่าจะใช้ได้กับทุกประเภทอินพุตที่ไม่สูงกว่าหนึ่งบรรทัดของข้อความ ใช้กฎประเภทเพื่อให้เหมาะกับ

ดังนั้นฉันรู้ว่าคำตอบนี้ได้รับการตอบแล้วหลายครั้ง แต่ฉันรู้สึกว่าฉันมีวิธีการแก้ปัญหาที่หรูหรากว่าวิธีที่ได้จัดเตรียมไว้แล้ว และไม่เพียงแค่ 1 โซลูชั่นที่หรูหราเท่านั้น แต่ยังมีอีก 2 โซลูชั่นที่แยกจากกันเพื่อกระตุ้นจินตนาการของคุณ ด้วยที่กล่าวว่าทุกสิ่งที่คุณต้องรู้และเห็นอยู่ใน 2 JS Fiddle ของพร้อมแสดงความคิดเห็น

โซลูชัน # 1 อาศัย "ช่องทำเครื่องหมาย" ดั้งเดิมของเบราว์เซอร์ที่กำหนดแม้ว่าจะมีการบิด ... มันมีอยู่ใน div ซึ่งง่ายต่อการวางตำแหน่งข้ามเบราว์เซอร์พร้อมโอเวอร์โฟลว์: ซ่อนเพื่อตัดเกิน 1px (นี่คือสิ่งที่คุณไม่สามารถเห็นขอบเขตที่น่าเกลียดของ FF)

HTML แบบง่าย: (ไปตามลิงก์เพื่อตรวจสอบ css พร้อมความคิดเห็นบล็อกโค้ดคือการตอบสนอง stackoverflow) http://jsfiddle.net/KQghJ/

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

โซลูชัน # 2 ใช้ "ช่องทำเครื่องหมายสลับแฮ็ก" เพื่อสลับสถานะ CSS ของ DIV ซึ่งอยู่ในตำแหน่งที่เหมาะสมในเบราว์เซอร์และตั้งค่าด้วยสไปรต์แบบง่าย ๆ สำหรับช่องทำเครื่องหมายที่ไม่ได้ตรวจสอบและตรวจสอบสถานะ สิ่งที่จำเป็นต้องมีก็คือการปรับตำแหน่งพื้นหลังด้วย Checkbox Toggle Hack ที่กล่าวมา ในความคิดของฉันนี้เป็นทางออกที่ดีกว่าเพราะคุณสามารถควบคุมช่องทำเครื่องหมายและวิทยุของคุณได้มากขึ้นและสามารถรับประกันได้ว่าพวกเขาจะดูเหมือนกันในเบราว์เซอร์

HTML แบบง่าย: (ไปตามลิงก์เพื่อตรวจสอบ CSS พร้อมความคิดเห็นบล็อกโค้ดคือการตอบสนอง StackOverflow) http://jsfiddle.net/Sx5M2/

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

หากใครไม่เห็นด้วยกับวิธีการเหล่านี้โปรดทิ้งฉันไว้ฉันจะฟังความคิดเห็นเกี่ยวกับสาเหตุที่คนอื่นไม่เจอวิธีแก้ไขปัญหาเหล่านี้หรือถ้าพวกเขามีทำไมฉันไม่เห็นคำตอบที่นี่เกี่ยวกับพวกเขา? หากใครเห็นวิธีใดวิธีหนึ่งเหล่านี้ล้มเหลวก็เป็นการดีที่ได้เห็นเช่นกัน แต่สิ่งเหล่านี้ได้รับการทดสอบในเบราว์เซอร์ล่าสุดและใช้วิธีการ HTML / CSS ที่ค่อนข้างเก่าและเป็นสากลเท่าที่ฉันเคยเห็น

ขอบคุณมาก! สิ่งนี้ก็ทำให้ฉันบ้าตลอดไป

ในกรณีเฉพาะของฉันสิ่งนี้ใช้ได้กับฉัน:

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 ซึ่งอาจอธิบายความแตกต่างบางอย่าง แต่สิ่งนี้ดูเหมือนจะทำงานได้ดีสำหรับฉัน

position: relative; มีปัญหาบางอย่างใน IE ที่มี z-index และภาพเคลื่อนไหวเช่น jQuery's slideUp / slideDown

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;
}

jQuery:

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

การจัดแต่งทรงผมอาจต้องมีการปรับแต่งขึ้นอยู่กับขนาดตัวอักษรที่ใช้ <label>

PS:
ฉันใช้ie7jsเพื่อให้ css ทำงานใน IE6

ใช้อย่างง่ายvertical-align: subๆ ตามที่แนะนำpokrishka

ซอ

รหัส HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

รหัส CSS:

.checkboxes input {
    vertical-align: sub;
}

วิธีแก้ปัญหาง่าย ๆ :

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

ทดสอบใน Chrome, Firefox, IE9 +, Safari, iOS 9+