जब होवर पर बोल्ड किया जाता है, तो इनलाइन तत्व शिफ्ट हो जाते हैं

Question

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

मैं इस SitePoint पोस्ट के समान समस्या का सामना करता हूं । हालाँकि, पोस्ट में उचित समाधान नहीं है। मैं हर जगह एक समाधान के लिए खोज की है और एक नहीं मिल सकता है। निश्चित रूप से मैं ऐसा करने की कोशिश करने वाला एकमात्र व्यक्ति नहीं हो सकता।

क्या किसी के पास कोई विचार है?

पुनश्च: मुझे मेनू आइटम में पाठ की चौड़ाई पता नहीं है, इसलिए मैं सिर्फ ली वस्तुओं की चौड़ाई निर्धारित नहीं कर सकता।

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

Answer 1

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

JSfiddle पर काम कर रहे उदाहरण की जाँच करें । विचार छद्म तत्व :hoverमें बोल्ड (या किसी भी राज्य शैली) सामग्री के लिए स्थान आरक्षित करने के लिए है :beforeऔर सामग्री के लिए स्रोत के रूप में शीर्षक टैग का उपयोग करना है।

Comments

उत्तम! यह ul का उपयोग किए बिना भी <a> के लिए काम करता है, मैं शीर्षक के बजाय डेटा-टेक्स्ट जैसी किसी अन्य विशेषता का उपयोग करूंगा।

— ब्रितनगर

यह समाधान काम करता है, लेकिन इसके बेहतर आप जोड़ना जब margin-top: -1pxकरने के लिए :after1px ऊंचाई का स्थान बनाने से बचने के लिए।

— micropro.cz

@ Mattroberts33 :बनाम ::"डबल कॉलोन ::CSS3 सिंटैक्स का समर्थन करने वाला प्रत्येक ब्राउज़र भी सिंटैक्स का समर्थन करता है :, लेकिन IE 8 केवल एकल-कॉलन का समर्थन करता है, इसलिए अभी के लिए, यह सर्वश्रेष्ठ ब्राउज़र समर्थन के लिए केवल-कोलन का उपयोग करने की सिफारिश की गई है।" css-tricks.com/almanac/selectors/a/after-and-before

— gfullam

@HughHughTeotl फ़ॉन्ट-आकार का उपयोग करें: 0 के लिए ULया a::after, दूसरे शब्दों में - सभी पैडिंग / मार्जिंग / लाइन-हाइट्स / फ़ॉन्ट-आकार आदि को रीसेट करें

— 350D

दुर्भाग्य से, आपके पास हमेशा टूलटिप प्रदर्शित होता है :-(

— बेनेडिकट

Answer 2

एक समझौता समाधान पाठ-छाया के साथ नकली बोल्ड करने के लिए है, जैसे:

पाठ-छाया: 0 0 0.01px काला;

बेहतर तुलना के लिए मैंने ये उदाहरण बनाए:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

करने के लिए पासिंग text-shadowके लिए बहुत कम मूल्य blur-radiusधुंधले प्रभाव इतना स्पष्ट नहीं कर देगा।

सामान्य तौर पर जितना अधिक आपका दोहराव text-shadowआपके पाठ को मिलेगा, लेकिन उतने ही समय में अक्षरों का मूल आकार खो देता है।

मुझे आपको चेतावनी देनी चाहिए कि blur-radiusअंशों को सेट करना सभी ब्राउज़रों में समान नहीं है! उदाहरण के लिए सफारी को उसी तरह प्रस्तुत करने के लिए बड़े मूल्यों की आवश्यकता होती है, जिस तरह से क्रोम करेगा।

Comments

यह भी अन्य ब्राउज़र बोल्ड समाधान की तुलना में बदसूरत है और बचा जाना चाहिए

— Zach Saucier

Answer 3

यदि आप चौड़ाई सेट नहीं कर सकते हैं, तो इसका मतलब है कि पाठ बोल्ड हो जाने पर चौड़ाई बदल जाएगी। इससे बचने का कोई तरीका नहीं है, सिवाय इसके कि हर राज्य के लिए पैडिंग / मार्जिन को संशोधित करने के लिए समझौता किया जाए।

Comments

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

— cletus

हां, मैं इस कारण से बोल्ड माउसओवर के प्रभाव से बचता हूं।

— स्टीव वॉर्थम

"इससे बचने का कोई उपाय नहीं है"। नीचे 350D द्वारा उत्तर देखें।

— गुफलाम

यह भी ध्यान दें कि एंड्रयू का जवाब 350D के समाधान को जोड़ने से 4 साल पहले पोस्ट किया गया था। Attr () फ़ंक्शन के साथ छद्म तत्व सामग्री मूल्य के रूप में कार्य करना संभव नहीं था फिर वापस :) स्टैक ओवरफ्लो में ओह समय उड़ जाता है। हालाँकि समुदाय इस पर हावी हो जाता है और उसके पास स्वीकृत उत्तर और सबसे अधिक उत्थान है, इसलिए मैं खुश हूँ!

— जस्टस रोमिज़न

Answer 4

एक अन्य विचार का उपयोग कर रहा है letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

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

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Comments

क्या यह सभी ब्राउज़रों के साथ काम करता है, विशेष रूप से IE10 + और सफारी?

— उमैर हाफ़िज़

मेरा पसंदीदा एक :)

— Inc33

@UairairHafeez हाँ सभी आधुनिक ब्राउज़र ओपेरा मिनी caniuse.com/#feat=css-letter-spacing

— जॉन मैगनोलिया

आपको कैसे पता चला कि 0.235px सही राशि थी? क्या रिक्ति की आवश्यकता है इसकी गणना करने के लिए कोई सूत्र है?

— कोल्ड_क्लास

नहीं, मुझे लगता है कि यह सिर्फ त्वरित परीक्षण और त्रुटि थी

— जॉन मैगनोलिया

Answer 5

Jquery में एक पंक्ति:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

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

Comments

क्या आप पृष्ठ के सभी लिंक के लिए ऐसा कर सकते हैं? यही है, कार्यों के ul.nav li aसाथ प्रतिस्थापित aकरता है?

— gnzlbg

यह सवाल JS के साथ टैग नहीं किया गया था, अकेले jQuery दें। कृपया अनावश्यक समाधान पोस्ट न करें।

— Zach Saucier

@Zau Saucier कुछ परिस्थितियों में कुछ देवता JS समाधान पसंद कर सकते हैं, क्योंकि वे आमतौर पर छोटे होते हैं। जेएस के साथ कुछ पोस्ट करने वाले हर व्यक्ति को नीचा दिखाने के बजाय, आप जेएस टैग को सवाल में जोड़ सकते हैं और प्रत्येक व्यक्ति को यह तय करने दें कि वे किस समाधान को अधिक उपयोगी मानते हैं।

— lurkit

@Zach Saucier सीएसएस समाधान कुछ स्थितियों में व्यावहारिक नहीं हो सकता है। कभी-कभी आपको एक अलग शीर्षक विशेषता रखने की आवश्यकता हो सकती है, या पहले से ही छद्म तत्व के बाद :: का उपयोग किया जाता है, या आप व्यक्तिगत रूप से दिए गए स्थिति पर अधिक व्यावहारिक रूप से जेएस में एक लाइनर का उपयोग करने के लिए सीएसएस की कई लाइनों पर विचार कर सकते हैं। मैं ज्यादातर मामलों में सीएसएस जवाब को बेहतर मानता हूं, लेकिन जेएस के जवाबों को अतिरिक्त विकल्पों के रूप में लेना उपयोगी है।

— लुर्किट

यह एकमात्र समाधान है जो मैं पा सकता हूं कि तत्वों के बीच अंतर को बनाए रखते हुए समस्या को हल करता है।

— जैडन मिसपी

Answer 6

CSS3 समाधान - प्रायोगिक

(नकली बोल्डनेस)

एक अलग समाधान साझा करने के लिए सोचा जो किसी ने भी यहां नहीं सुझाया। वहाँ एक संपत्ति कहा जाता है text-strokeजो इस के लिए आसान हो जाएगा।

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

यहां, मैं spanटैग के अंदर पाठ को लक्षित कर रहा हूं और हम इसे एक पिक्सेल द्वारा स्ट्रोक करते हैं blackजिसके साथ boldउस विशेष पाठ के लिए शैली का अनुकरण करेंगे ।

ध्यान दें कि यह संपत्ति व्यापक रूप से समर्थित नहीं है, जैसा कि अब (इस उत्तर को लिखते समय), केवल क्रोम और फ़ायरफ़ॉक्स इस का समर्थन करते हैं। के लिए ब्राउज़र समर्थन के बारे में अधिक जानकारी के लिए text-stroke, आप CanIUse का संदर्भ ले सकते हैं ।

---

बस कुछ अतिरिक्त सामानों को साझा करने के लिए, आप उपयोग कर सकते हैं -webkit-text-stroke-width: 1px;यदि आप colorअपने स्ट्रोक के लिए सेट नहीं देख रहे हैं ।

Comments

यह अद्भुत है

— एलन फिट्जपैट्रिक

महान टिप। दुर्भाग्यपूर्ण है कि यह 4 साल बाद भी मानक नहीं है।

— दविद वेसेज़लोवस्की

Answer 7

आप कुछ तरह का उपयोग कर सकते हैं

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

और फिर अपनी सीएसएस में स्पैन कंटेंट को बोल्ड सेट करें और इसे विजिबिलिटी के साथ छिपाएं: छिपा हुआ, ताकि यह अपने आयामों को बनाए रखे। फिर आप इसे ठीक से फिट करने के लिए निम्नलिखित तत्वों के मार्जिन को समायोजित कर सकते हैं।

मुझे यकीन नहीं है कि यह दृष्टिकोण हालांकि एसईओ के अनुकूल है।

Comments

यह डेवलपर / रखरखाव के अनुकूल भी नहीं है

— Zach Saucier

Answer 8

मैंने बस "छाया" समाधान के साथ समस्या को हल किया। यह सबसे सरल और प्रभावी लगता है।

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

तीन बार छाया को दोहराने की आवश्यकता नहीं है (परिणाम मेरे लिए समान था)।

Comments

यह भी अन्य ब्राउज़र की तुलना में बोल्ड समाधान की तुलना में बदसूरत है और बचा जाना चाहिए

— Zach Saucier

Answer 9

मुझे तुम्हारी जैसी ही समस्या थी। मैं चाहता था कि मेरे लिंक बोल्ड हो जाएँ जब आप उन पर मंडराएँ लेकिन न केवल मेनू में बल्कि पाठ में भी। जैसा कि आप अनुमान लगाते हैं कि यह सभी अलग-अलग चौड़ाई का पता लगाने वाला एक असली काम होगा। समाधान बहुत आसान है:

एक बॉक्स बनाएं जिसमें लिंक टेक्स्ट बोल्ड हो लेकिन रंगीन आपकी पृष्ठभूमि की तरह हो और इसके ऊपर आपका वास्तविक लिंक हो। यहाँ मेरे पृष्ठ से एक उदाहरण है:

सीएसएस:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

बेशक आपको अपने पेज के बैकग्राउंड कलर से # FFFFE0 को बदलना होगा। Z- सूचकांकों के लिए आवश्यक नहीं लगता है, लेकिन मैं उन्हें वैसे भी डाल देता हूं (जैसा कि एचटीएमएल-कोड में "हाइपर" तत्व के बाद "हाइपो" तत्व होगा)। अब, अपने पृष्ठ पर एक लिंक डालने के लिए, निम्नलिखित शामिल करें:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

दूसरा "यहाँ" अदृश्य होगा और आपके लिंक के नीचे छिपा होगा। चूंकि यह आपके लिंक टेक्स्ट के साथ बोल्ड में एक स्टैटिक बॉक्स है, इसलिए आपका बाकी टेक्स्ट किसी भी तरह शिफ्ट नहीं होगा, क्योंकि लिंक पर जाने से पहले ही यह पहले ही शिफ्ट हो जाता है।

आशा है कि मैं मदद करने में सक्षम था :)।

बहुत लंबा

Answer 10

आप "मार्जिन" संपत्ति के साथ काम कर सकते हैं:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

बस यह सुनिश्चित करें कि बाएं और दाएं मार्जिन काफी बड़ा है, इसलिए अतिरिक्त स्थान में बोल्ड टेक्स्ट हो सकता है। लंबे शब्दों के लिए, आप विभिन्न मार्जिन चुन सकते हैं। यह सिर्फ एक और काम है, लेकिन मेरे लिए काम कर रहा है।

Comments

मैंने एक समान समाधान का उपयोग किया, लेकिन मेरे लिए - बस हॉवर शैली में 'मार्जिन: 0 -2px' जोड़कर (और सामान्य शैली में कुछ और नहीं जोड़ना) - महान काम किया।

— युवल ए।

अगर आपकी स्ट्रिंग लंबाई में कोई परिवर्तनशीलता नहीं है तो यह काम नहीं करता है

— kat

Answer 11

मुझे इसके बजाय पाठ-छाया का उपयोग करना पसंद है। विशेष रूप से इसलिए क्योंकि आप पाठ-छाया को चेतन करने के लिए संक्रमण का उपयोग कर सकते हैं।

आप सभी की जरूरत है:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

संपूर्ण नेविगेशन के लिए इस jsfiddle को देखें: https://jsfiddle.net/831r3yrb/

ब्राउज़र समर्थन और पाठ-छाया पर अधिक जानकारी: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Comments

यह बदलाव के उपयोग के साथ अच्छा काम करता है। महान वैकल्पिक समाधान।

— यजमीन

Answer 12

मैं hover पर फोंट (°) स्विच करने के खिलाफ सलाह दूंगा। इस मामले में यह सिर्फ मेनू आइटम थोड़ा आगे बढ़ रहा है, लेकिन मैंने ऐसे मामलों को देखा है जहां पूर्ण पैराग्राफ में सुधार हो जाता है क्योंकि चौड़ीकरण एक अतिरिक्त आवरण लपेटता है। आप इसे तब नहीं देखना चाहते जब केवल एक चीज आप कर्सर को हिलाएं; यदि आप कुछ नहीं करते हैं तो पृष्ठ लेआउट को बदलना नहीं चाहिए।

शिफ्ट सामान्य और इटैलिक के बीच स्विच करने पर भी हो सकता है। यदि आपके पास पाठ के नीचे कमरा है, तो मैं रंग बदलने की कोशिश करूंगा, या रेखांकित करूंगा। (नीचे की सीमा से स्पष्ट रहना चाहिए)

अगर मैं अपने फॉर्म डिजाइन वर्ग के लिए स्विचिंग फोंट का इस्तेमाल करता हूं तो मैं बहुत खुश होऊंगा :-)

(°) शब्द फ़ॉन्ट का अक्सर दुरुपयोग होता है। "वर्दाना" एक टाइपफेस है , "वर्दाना नॉर्मल" और "वर्डडाना बोल्ड" एक ही टाइपफेस के विभिन्न फॉन्ट हैं ।

Answer 13

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}

<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

Answer 14

मैं पाठ-छाया समाधान का उपयोग करता हूं जैसा कि कुछ अन्य लोग यहां वर्णित हैं:

text-shadow: 0 0 0.01px;

अंतर यह है कि मैं छाया रंग निर्दिष्ट नहीं करता हूं, इसलिए यह समाधान सभी फ़ॉन्ट रंगों के लिए सार्वभौमिक है।

Answer 15

एक वैकल्पिक दृष्टिकोण पाठ-छाया के माध्यम से बोल्ड पाठ को "अनुकरण" करना होगा। यह फ़ॉन्ट आइकन पर भी काम करने के लिए बोनस (/ आपके मामले पर निर्भर करता है) है।

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

किंडा हैकी, हालांकि यह आपको पाठ को डुप्लिकेट करने से बचाता है (जो कि बहुत उपयोगी है, क्योंकि यह मेरे मामले में था)।

Answer 16

यह मेरे द्वारा पसंद किया जाने वाला समाधान है। इसके लिए जेएस की थोड़ी आवश्यकता होती है, लेकिन आपको अपनी शीर्षक संपत्ति की आवश्यकता बिल्कुल नहीं है और आपका सीएसएस बहुत सरल रह सकता है।

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Answer 17

इस बारे में क्या? एक जावास्क्रिप्ट - CSS3 मुफ्त समाधान।

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

Comments

यह समस्या को ठीक करने के लिए बहुत सारे अतिरिक्त मार्कअप और सीएसएस है ... यह डेवलपर, एसईओ या भविष्य के अनुकूल नहीं है

— Zach Saucier

Answer 18

बहुत सुरुचिपूर्ण समाधान नहीं है, लेकिन "काम करता है":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

Answer 19

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

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Answer 20

इसका उपयोग करने के लिए बेहतर है :: इसके बजाय एक :: पहले इस तरह के बाद :

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

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

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

अधिक जानकारी के लिए: https://jsfiddle.net/r25foavy/

Comments

क्या आप a::beforeइससे बेहतर होने का औचित्य प्रदान कर सकते हैं a::after? ऐसा लगता है कि आपके उत्तर का एक महत्वपूर्ण टुकड़ा है, लेकिन यह स्पष्ट नहीं है कि इस मामले में एक दूसरे के लिए बेहतर क्यों है।

— निर्वेद्रम

Answer 21

बोल्ड सक्सेस को हॉवर करने पर मैंने मेन्यू तय किया। यह उत्तरदायी है, यह मेरा कोड है:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Answer 22

यदि आप जावास्क्रिप्ट का उपयोग करने से पीछे नहीं हैं, तो पृष्ठ दिखाए जाने के बाद आप उचित चौड़ाई निर्धारित कर सकते हैं। यहाँ बताया गया है कि मैंने यह कैसे किया (प्रोटोटाइप का उपयोग करके):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

Comments

जावास्क्रिप्ट को प्रश्न में टैग नहीं किया गया था, अकेले jQuery दें। कृपया प्रश्न में टैग की गई भाषाओं का उपयोग करके उत्तर रखें

— Zach Saucier

Answer 23

मैं वास्तव में इसे बर्दाश्त नहीं कर सकता, जब कोई आपको बताता है कि समस्या का सरल समाधान होने पर कुछ ऐसा नहीं करना चाहिए। मुझे झूठे तत्वों के बारे में यकीन नहीं है, लेकिन मैंने सिर्फ एक ही मुद्दा तय किया है। मेरे पास एक मेनू है जिसमें div टैग हैं।

बस div टैग को "डिस्प्ले: इनलाइन-ब्लॉक" सेट करें। इनलाइन ताकि वे एक-दूसरे के बगल में बैठें और उन्हें ब्लॉक करें कि आप एक चौड़ाई सेट कर सकते हैं। बस बोल्ड टेक्स्ट के लिए पर्याप्त चौड़ाई सेट करें और टेक्स्ट सेंटर को संरेखित करें।

(नोट: ऐसा लगता है कि मेरा html [नीचे] अलग हो रहा है, लेकिन प्रत्येक मेनू आइटम में एक div टैग था, जो चारों ओर से घूमता हुआ आईडी और वर्ग नाम SearchBar_Cateogory के साथ लिपटा था। यानी: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (मेरे पास प्रत्येक मेनू आइटम में एंकर टैग लिपटा हुआ था, लेकिन मैं उन्हें एक नए उपयोगकर्ता के रूप में प्रस्तुत करने में सक्षम नहीं था)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

सीएसएस:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

Comments

यह एक निश्चित चौड़ाई का उपयोग कर रहा है जैसे ओपी निर्दिष्ट नहीं है। जैसे, यह जवाब पूछे जा रहे सवाल का जवाब नहीं देता है

— Zach Saucier

Answer 24

इसे इस्तेमाल करे:

.nav {
  font-family: monospace;
}

Comments

वह कैसे कुछ भी बदलेगा?

— leonheess

@ MiXT4PE मोनोस्पेस के साथ, पात्रों का आकार नियमित या बोल्ड होता है। आकार नहीं बदलेगा

— युकुएल

एक फ़ॉन्ट परिवार को बदलना क्योंकि इसका कोई हल नहीं है

— funkysoul

UI बग को ठीक करने के लिए फ़ॉन्ट-परिवार बदलना एक समाधान नहीं है, क्योंकि फ़ॉन्ट-परिवार अधिकांश समय सभी ब्रांड टाइपोग्राफी का मूल है।

— उमैर हफीज

टाइपोग्राफी यूआई डिज़ाइन का एक बड़ा हिस्सा है और ब्रांड के लिए डिज़ाइन किए गए टाइपफेस को यूआई में उनके उपयोग को ध्यान में रखना चाहिए। PT Sans and Clear Sans दो टाइपफेस हैं जिनका ग्लिफ़ स्पेसिंग पूरे वज़न के समान है। दुर्भाग्य से, यह सच है कि बहुत कम (गैर-मोनोसेप्ड) टाइपफेस के पास यह संपत्ति है, और यह संभव है कि टाइपफेस विकास के लिए भुगतान करने की तुलना में प्रश्न के अन्य उत्तरों में से एक को लागू करने के लिए सस्ता हो। हालाँकि, यह परिवर्तनशील फ़ॉन्ट उपलब्धता में सुधार के रूप में बदल जाएगा। वेरिएबल चौड़ाई + वेट वाले फोंट के लिए v-fonts.com देखें ।

— पीटर डब्ल्यू

Answer 25

यदि नकारात्मक पाठ नियमित की तुलना में व्यापक है, तो आप नकारात्मक मार्जिन भी आज़मा सकते हैं। (हमेशा नहीं) तो विचार यह है कि वर्गों का उपयोग करना है: होवर अवस्था।

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

सीएसएस:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

मुझे आशा है कि मैं मदद कर सकता हूँ!

Comments

कृपया टैग किए गए लोगों के अलावा अन्य भाषाओं में उत्तर पोस्ट न करें। यह पूछे जाने वाले प्रश्न का उत्तर नहीं देता है

— Zach Saucier