सीएसएस: अपने कंटेनर के आकार को बदले बिना कुछ पाठ को मोड़ना

Question

मेरे पास एक क्षैतिज नेविगेशन मेनू है, जो मूल रूप से <ul>साइड-बाय-साइड सेट किए गए तत्वों के साथ है। मैं चौड़ाई को परिभाषित नहीं करता, लेकिन बस पैडिंग का उपयोग करता हूं, क्योंकि मैं चाहूंगा कि मेनू आइटम की चौड़ाई द्वारा परिभाषित की जाने वाली चौड़ाई। मैं वर्तमान में चयनित आइटम को बोल्ड करता हूं।

परेशानी यह है कि बल्डिंग में, शब्द थोड़ा चौड़ा हो जाता है, जिससे बाकी तत्व थोड़े से बाएं या दाएं तरफ शिफ्ट हो जाते हैं। क्या ऐसा होने से रोकने का कोई चतुर तरीका है? डंपिंग के कारण अतिरिक्त चौड़ाई को अनदेखा करने के लिए पैडिंग को बताने की तर्ज पर कुछ? मेरा पहला विचार "सक्रिय" तत्व के पैडिंग से बस कुछ पिक्सेल को घटाना था, लेकिन यह राशि भिन्न होती है।

यदि संभव हो तो मैं प्रत्येक प्रविष्टि पर एक स्थिर चौड़ाई सेट करने से बचना चाहूंगा और फिर वर्तमान में मेरे पास मौजूद पैडिंग समाधान के विपरीत, प्रविष्टियों के भविष्य में बदलाव को सरल बनाने के लिए।

Comments

आकार एक समस्या क्यों है? क्या यह किसी तरह लेआउट को गड़बड़ कर रहा है?

— चुलकी

मुझे लगता है कि स्टैक ओवरफ्लो पर वेब प्रोग्रामिंग सवाल सबसे अच्छा पूछा जाता है। हो सकता है कि कोई मॉड वहां माइग्रेट कर दे।

— सियारन

Chaulky: क्योंकि कुछ चीजें हैं जिनसे मैं अधिक घृणा करता हूं, लेआउट-वार, जब बटन आप पर क्लिक करने की कोशिश करने वाले होते हैं, तो

— Mala

doejo.com/blog/… एक समाधान है जो मैंने पाया है कि वही करता है जो जॉन और ब्लोव्स्की jscript के बारे में बात कर रहे थे।

— thebulfrog

जब हॉवर पर बोल्ड किया गया इनलाइन तत्वों

— १ar

Answer 1

मुझे एक ही समस्या थी, लेकिन थोड़ा समझौता करने के साथ एक समान प्रभाव मिला, मैंने इसके बजाय पाठ-छाया का उपयोग किया।

li:hover {text-shadow:0px 0px 1px black;}

यहाँ एक काम कर उदाहरण है:

body {
  font-family: segoe ui;
}

ul li {
  display: inline-block;
  border-left: 1px solid silver;
  padding: 5px
}

.textshadow :hover {
  text-shadow: 0px 0px 1px black;
}

.textshadow-alt :hover {
  text-shadow: 1px 0px 0px black;
}

.bold :hover {
  font-weight: bold;
}

<ul class="textshadow">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>

<ul class="textshadow-alt">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>

<ul class="bold">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>font-weight: bold;</code></li>
</ul>

jsfiddle उदाहरण

Comments

मैं इस समाधान से प्यार करता हूं, हालांकि मैं उस एक को 1px 0px 0px पर फ्लिप करने की सलाह देता हूं। देखने में थोड़ा और बोल्ड जैसा लगता है।

— एम। हेरोल्ड

मुझे एक सीएसएस-केवल समाधान की आवश्यकता थी और यह उत्तर है।

— जेकासो

आपकी असली प्रतिभा! सादगी इसे awsome बना!

— लूफी

केवल जोड़ने li:hover {text-shadow: 1px 0 0 black;}से अक्षरों के बीच बहुत कम रिक्ति के साथ पाठ उत्पन्न होता है। सुधार करने के लिए है कि फिर से, हम भी सेटli {letter-spacing: 1px;}

— पैट्रिक हथौड़ा

मैंने उपयोग किया -0.5px 0 #fff, 0.5px 0 #fff, क्योंकि हम पाठ और छाया के बीच के छोटे अंतर को देख सकते थे। और जब पाठ बोल्ड होता है, तो यह दोनों पक्षों के लिए वजन जोड़ता है।

— atorscho

Answer 2

का उपयोग कर सबसे अच्छा काम कर समाधान :: के बाद

एचटीएमएल

<li title="EXAMPLE TEXT">
  EXAMPLE TEXT
</li>

सीएसएस

li::after {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

इसमें बोल्ड टेक्स्ट की चौड़ाई के साथ एक अदृश्य छद्म तत्व जोड़ा गया है, जिसे titleविशेषता के आधार पर रखा गया है।

text-shadowसमाधान मैक पर अप्राकृतिक लग रहा है और सभी सौंदर्य है कि पाठ मैक प्रस्तावों पर प्रतिपादन उपयोग नहीं किया जाता .. :)

http://jsfiddle.net/85LbG/

साभार: https://stackoverflow.com/a/20249560/5061744

Comments

यह सबसे विश्वसनीय और साफ समाधान है, यह बस तत्व में बोल्ड टेक्स्ट के लिए स्थान रखता है। मेरे मामले में, अतिरिक्त छद्म तत्व ने ऊंचाई में परिवर्तन का कारण बना। ब्लॉक में ऋणात्मक जोड़ने margin-topसे ::afterहल हो गया।

— वाक्लेव नोवोटनी

यह समाधान महान है! मैंने जेएस का उपयोग एक "डेटा-सामग्री" विशेषता को जोड़ने के लिए किया है जिसमें तत्व का पाठ शामिल है ताकि मैं HTML को बदलने से बच सकूं।

— मिस्टीक्रिस्टी

बहुत बढ़िया। यह सबसे अच्छा जवाब होना चाहिए। ध्यान दें कि यदि ली से अलग तत्व आपको डिस्प्ले का उपयोग करना पड़ सकता है: ब्लॉक; पर: मूल तत्व के बाद।

— ब्लैकबम

महान समाधान! इसके साथ ठीक काम करता है :: पहले भी, मेरे मामले में यह निचले हिस्से में अतिरिक्त मार्जिन को रोकता है।

— थॉमस चैंपियन

इस समाधान के लिए धन्यवाद। मैंने शुरू में टेक्स्ट-शैडो का उपयोग किया था, लेकिन यह सफारी में काम नहीं करता क्योंकि यह दशमलव मानों को बंद कर देता है। जब से मैं 0.1px का उपयोग कर रहा था, यह 0. से गोल किया जा रहा था। मैंने केवल शीर्षक विशेषता को नाम के साथ बदल दिया क्योंकि मैं नहीं चाहता था कि टूलटिप्स दिखाए जाएं

— जोनाथन कार्डोज़

Answer 3

सबसे पोर्टेबल और नेत्रहीन सुखदायक समाधान का उपयोग करना होगा text-shadow। यह घूमता है और एलेक्सजाली और मेरी खुद की ट्विक्स का उपयोग करते हुए थोरगीर के जवाब के उदाहरण दिखाता है :

  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

यह छोटे "छाया" को काले रंग में डालता है ( blackयदि आवश्यक हो तो अपने फ़ॉन्ट के रंग का नाम / कोड का उपयोग करें ) प्रत्येक पत्र के दोनों किनारों पर उन इकाइयों का उपयोग करें जो फ़ॉन्ट रेंडरिंग के साथ ठीक से स्केल करेंगे।

चेतावनी: px मान दशमलव मानों का समर्थन करते हैं, लेकिन जब फ़ॉन्ट आकार बदलता है (जैसे उपयोगकर्ता Ctrl+ के साथ दृश्य को मापता है तो वे बहुत अच्छे नहीं दिखेंगे+ ) । इसके बजाय सापेक्ष मूल्यों का उपयोग करें।

यह उत्तर exइकाइयों के अंशों का उपयोग करता है क्योंकि वे फ़ॉन्ट के साथ बड़े पैमाने पर होते हैं।
में ~ सबसे ब्राउज़र चूक * , उम्मीद 1ex≈ 8pxऔर इसलिए 0.025ex≈ 0.1px।

अपने आप को देखो:

li             { color: #000; } /* set text color just in case */
.shadow0       { text-shadow: inherit; }
.shadow2       { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.shadow4       { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.shadow6       { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.shadow8       { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.bold          { font-weight: bold; }
.bolder        { font-weight: bolder; }
.after span        { display:inline-block; font-weight: bold; } /* workaholic… */
.after:hover span  { font-weight:normal; }
.after span::after { content: attr(title); font-weight: bold; display:block; 
                     height: 0; overflow: hidden; }
.ltrsp         { letter-spacing:0; font-weight:bold; } /* @cgTag */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover       { font-weight: normal!important; text-shadow: none!important; }

<li class="shadow0">MmmIii123 This line tests shadow0 (plain)</li>
<li class="shadow2">MmmIii123 This line tests shadow2 (0.02ex)</li>
<li class="shadow4">MmmIii123 This line tests shadow4 (0.04ex)</li>
<li class="shadow6">MmmIii123 This line tests shadow6 (0.06ex)</li>
<li class="shadow8">MmmIii123 This line tests shadow8 (0.08ex)</li>
<li class="after"><span title="MmmIii123 This line tests [title]"
                   >MmmIii123 This line tests [title]</span> (@workaholic…)</li>
<li class="ltrsp"  >MmmIii123 This line tests ltrsp (@cgTag)</li>
<li class="bold"   >MmmIii123 This line tests bold</li>
<li class="bolder" >MmmIii123 This line tests bolder</li>
<li class="shadow2 bold">MmmIii123 This line tests shadow2 (0.02ex) + bold</li>
<li class="shadow4 bold">MmmIii123 This line tests shadow4 (0.04ex) + bold</li>
<li class="shadow6 bold">MmmIii123 This line tests shadow6 (0.06ex) + bold</li>
<li class="shadow8 bold">MmmIii123 This line tests shadow8 (0.08ex) + bold</li>

प्रदान की गई लाइनों पर होवर करें कि वे मानक पाठ से कैसे भिन्न होते हैं।

अपने ब्राउज़र के ज़ूम स्तर ( Ctrl+ +और Ctrl+) को बदल दें- ) को देखें कि वे कैसे भिन्न हैं।

मैंने तुलना के लिए यहां दो अन्य समाधान जोड़े: @ cgTag की पत्र रिक्ति चाल , जो इतनी अच्छी तरह से काम नहीं करती है क्योंकि इसमें फ़ॉन्ट चौड़ाई सीमा का अनुमान लगाना शामिल है, और @ वर्कहॉलिक_गैंगस्टर 911 की :: ड्रिकिंग ट्रिक के बाद , जो अजीब अतिरिक्त वीडियो छोड़ता है ताकि बोल्ड टेक्स्ट का विस्तार हो सके पड़ोसी टेक्स्ट आइटम्स को न्यूड किए बिना (मैं बोल्ड टेक्स्ट के बाद एट्रिब्यूशन डालता हूं ताकि आप देख सकें कि यह कैसे नहीं चलता है)।

---

भविष्य में, हमारे पास और अधिक परिवर्तनशील फ़ॉन्ट होंगे जो फ़ॉन्ट ग्रेड के माध्यम से बदलने जैसी चीजों में सक्षम हैं font-variation-settings। ब्राउज़र समर्थन तेजी से बढ़ रहा है (क्रोम 63+, फ़ायरफ़ॉक्स 62+) लेकिन इसके लिए अभी भी केवल मानक फोंट की आवश्यकता है और कुछ मौजूदा फोंट इसका समर्थन करते हैं।

यदि आप एक चर फ़ॉन्ट एम्बेड करते हैं, तो आप इस तरह सीएसएस का उपयोग करने में सक्षम होंगे:

/* Grade: Increase the typeface's relative weight/density */
@supports (font-variation-settings: 'GRAD' 150) {
  li:hover { font-variation-settings: 'GRAD' 150; }
}
/* Failover for older browsers: tiny shadows at right & left of the text
 * (replace both instances of "black" with the font color) */
@supports not (font-variation-settings: 'GRAD' 150) {
  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
}

मोज़िला चर फ़ॉन्ट्स गाइड पर विभिन्न ग्रेड के साथ खेलने के लिए स्लाइडर के साथ एक लाइव डेमो है । वेब पर चर फोंट के लिए Google का परिचय एक उच्च ग्रेड और कोई ग्रेड के बीच टॉगल का प्रदर्शन करने वाला एक एनिमेटेड GIF है:

Comments

इतना सरल, इतना सुंदर।

— रैंडी हॉल

Answer 4

मैंने पाया कि जब आप अक्षर 1px से समायोजित करते हैं तो ज्यादातर फोंट एक ही आकार के होते हैं।

a {
   letter-spacing: 1px;
}

a:hover {
   font-weight: bold;
   letter-spacing: 0px;
}

हालांकि यह नियमित फ़ॉन्ट को बदलता है ताकि प्रत्येक अक्षर में एक अतिरिक्त पिक्सेल रिक्ति हो। मेनू के लिए शीर्षक इतना छोटा है कि यह एक समस्या के रूप में मौजूद नहीं है।

Comments

यह सबसे अच्छा और सबसे कम समाधान है, हालांकि मैंने इसे बदल दिया ताकि यह 0 से शुरू हो और बोल्ड होने पर नकारात्मक पत्र रिक्ति पर जाए। यह भी आपको प्रत्येक फ़ॉन्ट और फ़ॉन्ट-आकार के लिए इसे ठीक करना होगा। मैं भी अद्यतन @ इस शामिल करने के लिए (2 समाधान के रूप में) Thorgeir की बेला jsfiddle.net/dJcPn/50/

— robotik

आधुनिक ब्राउज़र अब उप-पिक्सेल सटीकता का समर्थन करता है। तो आप 0.98pxछोटे या छोटे अंशों का उपयोग करके रिक्ति को ठीक कर सकते हैं ।

— रिएक्टगुलर

रिक्ति एल्गोरिथ्म बिल्कुल समान नहीं है क्योंकि यह कुछ अजीब लगता है (कुछ अक्षर थोड़े से चारों ओर नृत्य करते हैं) और, इससे भी महत्वपूर्ण बात यह है कि यह तब काम नहीं करता है जब फोंट को स्केल किया जाता है, भले ही आप 1pxइसे सापेक्ष मानों में बदल दें 0.025exया जैसे 0.0125ex। एक लाइव प्रदर्शन के लिए मेरा जवाब देखें ।

— एडम काटज़

@AdamKatz मुझे संदेह है कि इस उत्तर को पोस्ट किए जाने के बाद से फ़ॉन्ट प्रतिपादन बदल गया है, और यह इस बात पर बहुत निर्भर करता है कि आप किस फ़ॉन्ट का उपयोग कर रहे हैं।

— रिएक्टगुलर

Answer 5

अधिक अद्यतित उत्तर के लिए, आप उपयोग कर सकते हैं -webkit-text-stroke-width:

.element {
  font-weight: normal;
}

.element:hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

यह किसी भी छद्म तत्वों (जो कि स्क्रीन पाठकों के लिए एक प्लस है) और पाठ-छाया (जो गड़बड़ दिखता है और अभी भी एक मामूली 'कूद' प्रभाव पैदा कर सकता है) या किसी भी निश्चित चौड़ाई (जो अव्यवहारिक हो सकता है) को सेट करने से बचा जाता है।

यह आपको 1px की तुलना में बोल्डर होने के लिए एक तत्व सेट करने की अनुमति देता है (सैद्धांतिक रूप से, आप अपनी पसंद के अनुसार एक बोल्ड बना सकते हैं और एक फ़ॉन्ट के बोल्ड संस्करण बनाने के लिए एक घटिया-ईश वर्कआउट भी कर सकते हैं जिसमें बोल्ड नहीं है वैरिएंट, जैसे कस्टम फोंट ( संपादित करें: वैरिएबल फोंट इस सुझाव को दर्शाते हैं )। हालांकि इससे बचा जाना चाहिए क्योंकि यह संभवत: कुछ फोंट खरोंच और दांतेदार दिखाई देगा)

मैं निश्चित रूप से एज, फ़ायरफ़ॉक्स, क्रोम और ओपेरा (पोस्टिंग के समय) और सफारी में काम करता हूं ( संपादित करें: @ लार्स ब्लमबर्ग धन्यवाद कि पुष्टि करने के लिए )। यह IE11 या उससे कम में काम नहीं करता है।

यह भी ध्यान दें, यह -webkitउपसर्ग का उपयोग करता है , इसलिए यह मानक नहीं है और भविष्य में समर्थन को गिराया जा सकता है, इसलिए इस पर भरोसा न करें कि यह बोल्ड वास्तव में महत्वपूर्ण है - इस तकनीक से बचने के लिए सबसे अच्छा है जब तक कि यह केवल सौंदर्यपूर्ण न हो।

Comments

इसके अलावा सफारी 13.0.5 पर काम करता है। मेरे लिए अब तक का सबसे साफ समाधान।

— लार्स ब्लमबर्ग

Answer 6

दुर्भाग्य से चौड़ाई बदलने से बचने का एकमात्र तरीका जब पाठ बोल्ड है, तो सूची आइटम की चौड़ाई को परिभाषित करना है, हालांकि जैसा कि आपने कहा था कि मैन्युअल रूप से ऐसा करने में समय लगता है और स्केलेबल नहीं है।

केवल एक चीज जिसके बारे में मैं सोच सकता हूं, वह कुछ जावास्क्रिप्ट का उपयोग कर रही है जो कि बोल्ड होने से पहले टैब की चौड़ाई की गणना करती है, और फिर उसी समय चौड़ाई लागू करती है जिस समय बोल्ड की आवश्यकता होती है (या जब आप हॉवर या क्लिक करते हैं)।

Comments

एचएम, मैं इसके साथ प्रयोग करूंगा, हालांकि मैं चाहता हूं कि यह कम से कम गैर-जेएस उपयोगकर्ताओं के लिए उचित (यानी बोल्ड) दिखे। शायद मैं इसे बोल्ड भेज सकता हूं, JSto का उपयोग करें इसे अनबॉल्ड करें, चौड़ाई की गणना करें, और फिर इसे फिर से बोल्ड करें? या कि बस मूर्खतापूर्ण है?

— माला

हां, यह गैर-जावास्क्रिप्ट उपयोगकर्ताओं को समायोजित करने का सबसे अच्छा तरीका लगता है।

— ajcw

Answer 7

अनबॉल्ड कंटेंट के आधार पर ली की एक निश्चित चौड़ाई सेट करने के लिए जावास्क्रिप्ट का उपयोग करें, फिर <a>टैग में एक शैली लागू करके सामग्री को बोल्ड करें (या <li>कोई बच्चा नहीं होने पर एक अवधि जोड़ें )।

Comments

उफ़ - दोहराने के लिए खेद है: $

— Dan चल रहा है

वैसे भी आपके उत्तर के लिए धन्यवाद :)

— माला

@ मलाला क्या आपको कोई हल मिला? मजेदार रूप से पर्याप्त, मुझे एक समान समस्या है।

— डैन ब्लो्स

Answer 8

यह एक बहुत पुराना सवाल है, लेकिन मैं इसे फिर से देख रहा हूं क्योंकि मुझे एक ऐप में यह समस्या थी जिसे मैं विकसित कर रहा हूं और सभी उत्तर यहां चाहते हैं।

(TL के लिए इस अनुच्छेद को छोड़ें? DR ...)मैं Cloud.typography.com से गोथम वेबफ़ॉन्ट का उपयोग कर रहा हूं, और मेरे पास बटन हैं जो खोखले (एक सफेद सीमा / पाठ और एक पारदर्शी पृष्ठभूमि के साथ) शुरू करते हैं और होवर पर एक पृष्ठभूमि रंग प्राप्त करते हैं। मैंने पाया कि जो पृष्ठभूमि रंग मैं उपयोग कर रहा था उनमें से कुछ सफेद पाठ के साथ अच्छी तरह से विपरीत नहीं थे, इसलिए मैं उन बटनों के लिए पाठ को काले रंग में बदलना चाहता था, लेकिन - चाहे दृश्य चाल या सामान्य विरोधी-अलियासिंग विधियों के कारण - अंधेरा हल्की पृष्ठभूमि पर पाठ हमेशा काले रंग की पृष्ठभूमि पर सफेद पाठ की तुलना में हल्का होता है। मैंने पाया कि डार्क टेक्स्ट के लिए वज़न को 400 से बढ़ाकर लगभग उसी "विज़ुअल" वज़न को बनाए रखा। हालाँकि, यह एक छोटी राशि द्वारा बटन की चौड़ाई को बढ़ा रहा था - एक पिक्सेल का एक अंश - लेकिन यह बटन को "घबराना" से थोड़ा प्रकट करने के लिए पर्याप्त था, जिससे मैं छुटकारा पाना चाहता था।

उपाय:

जाहिर है, यह वास्तव में एक विकराल समस्या है, इसलिए इसे एक बारीक समाधान की आवश्यकता है। अंततः मैंने letter-spacingbolder पाठ पर एक नकारात्मक का उपयोग किया , जैसा कि ऊपर cgTag ने सुझाया था, लेकिन 1px रास्ता ओवरकिल होगा, इसलिए मैंने सिर्फ उसी चौड़ाई की गणना की जिसकी मुझे आवश्यकता होगी।

Chrome devtools में बटन का निरीक्षण करने पर, मैंने पाया कि मेरे बटन की डिफ़ॉल्ट चौड़ाई 165.47px, और होवर पर 165.69px, 0.22px का अंतर है। बटन में 9 अक्षर थे, इसलिए:

0.22 / 9 = 0.024444px

कि उन्हें इकाइयों में परिवर्तित करके मैं समायोजन फ़ॉन्ट-आकार अज्ञेय बना सकता था। मेरा बटन 16px के फ़ॉन्ट आकार का उपयोग कर रहा था, इसलिए:

0.024444 / 16 = 0.001527em

तो मेरे विशेष फ़ॉन्ट के लिए, निम्नलिखित सीएसएस बटन को हॉवर पर ठीक उसी चौड़ाई में रखता है :

.btn {
  font-weight: 400;
}

.btn:hover {
  font-weight: 500;
  letter-spacing: -0.001527em;
}

थोड़े परीक्षण और उपरोक्त सूत्र का उपयोग करके, आप letter-spacingअपनी स्थिति के लिए सही मूल्य पा सकते हैं , और यह फ़ॉन्ट आकार की परवाह किए बिना काम करना चाहिए।

एक चेतावनी यह है कि विभिन्न ब्राउज़र थोड़ा अलग उप-पिक्सेल गणना का उपयोग करते हैं, इसलिए यदि आप उप-पिक्सेल-सटीक परिशुद्धता के इस ओसीडी स्तर के लिए लक्ष्य कर रहे हैं, तो आपको परीक्षण को दोहराने और प्रत्येक ब्राउज़र के लिए एक अलग मान सेट करने की आवश्यकता होगी। ब्राउज़र-लक्षित सीएसएस शैलियों को आम तौर पर अच्छे कारण के लिए रखा जाता है, लेकिन मुझे लगता है कि यह एक उपयोग मामला है जहां यह एकमात्र विकल्प है जो समझ में आता है।

Answer 9

दिलचस्प सवाल। मुझे लगता है कि आप फ्लोट का उपयोग कर रहे हैं, है ना?

इस फ़ॉन्ट के विस्तार से छुटकारा पाने के लिए आप किसी भी तकनीक का उपयोग नहीं कर सकते हैं, इसलिए वे आवश्यक न्यूनतम चौड़ाई में फिट होने का प्रयास करेंगे - और अलग-अलग फ़ॉन्ट मोटाई इस मान को बदल देंगे।

इस परिवर्तन से बचने के लिए मुझे पता है कि अद्वितीय समाधान वह है जो आपने कहा था कि आप नहीं चाहते हैं: ली के लिए निश्चित आकार निर्धारित करना।

Answer 10

आप इसे amazon.com "शॉप बाय डिपार्टमेंट" हॉवर मेनू की तरह लागू कर सकते हैं। यह व्यापक div का उपयोग करता है। आप विस्तृत div बना सकते हैं और इसके दाहिने हिस्से को छिपा सकते हैं

Answer 11

अद्यतन: शीर्षक के लिए B टैग का उपयोग करना था क्योंकि IE11 में छद्म वर्ग i: के बाद नहीं दिखा जब मैंने दृश्यता छिपाई थी।

मेरे मामले में मैं लेबल पाठ के साथ एक (कस्टम डिज़ाइन किया गया) इनपुट चेकबॉक्स / रेडियो को संरेखित करना चाहता हूं जहां इनपुट की जाँच होने पर पाठ बोल्ड हो जाता है।

यहाँ पर दिया गया समाधान क्रोम में मेरे काम नहीं आया। इनपुट और लेबल के ऊर्ध्वाधर संरेखण के साथ गड़बड़ हो गई: के बाद psuedo वर्ग और -margins ने इसे ठीक नहीं किया।

यहाँ एक फिक्स है जहाँ आपको वर्टिकल अलाइनमेंट्स से परेशानी नहीं होती है।

/* checkbox and radiobutton */
label
{
    position: relative;
    display: inline-block;
    padding-left: 30px;
    line-height: 28px;
}

/* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */
label > input + b + i
{
    font-weight: bold;
    font-style: normal;
    visibility: hidden;
}

label > input:checked + b + i
{
    visibility: visible;
}

/* set title attribute of label > b */
label > input + b:after
{
    display: block;
    content: attr(title);
    font-weight: normal;
    position: absolute;
    left: 30px;
    top: -2px;
    visibility: visible;
}

label > input:checked + b:after
{
    display: none;
}

label > input[type="radio"],
label > input[type="checkbox"]
{
    position: absolute;
    visibility: hidden;
    left: 0px;
    margin: 0px;
    top: 50%;
    transform: translateY(-50%);
}

    label > input[type="radio"] + b,
    label > input[type="checkbox"]  + b
    {
        display: block;
        position: absolute;
        left: 0px;
        margin: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-color: #00a1a6;
        border-radius: 3px;
    }

    label > input[type="radio"] + b
    {
        border-radius: 50%;
    }

    label > input:checked + b:before
    {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        content: '';
        border-width: 0px 3px 3px 0px;
        border-style: solid;
        border-color: #fff;
        width: 4px;
        height: 8px;
        border-radius: 0px;
    }

    label > input[type="checkbox"]:checked + b:before
    {
        transform: translate(-50%, -60%) rotate(45deg);
    }

    label > input[type="radio"]:checked + b:before
    {
        border-width: 0px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label>
<label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>