Fareyle kalın yapıldığında satır içi öğelerin kayması

HTML listeleri ve CSS kullanarak yatay bir menü oluşturdum. Bağlantıların üzerine geldiğinizde her şey olması gerektiği gibi çalışır. Görüyorsunuz, bağlantılar için kalın bir gezinme durumu oluşturdum ve şimdi kalın boyut farkı nedeniyle menü bağlantıları değişiyor.

Bu SitePoint gönderisiyle aynı sorunla karşılaşıyorum . Bununla birlikte, yazı uygun bir çözüme sahip değildir. Her yerde bir çözüm aradım ve bir çözüm bulamıyorum. Elbette bunu yapmaya çalışan tek kişi ben olamam.

Herhangi bir fikri olan var mı?

Not: Menü öğelerindeki metnin genişliğini bilmiyorum, bu yüzden li öğelerinin genişliğini ayarlayamıyorum.

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

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'daki çalışma örneğine bakın . Fikir, sözde öğedeki kalın (veya herhangi bir :hoverdurum stili) içerik için yer ayırmak :beforeve içerik için kaynak etiketi olarak başlık etiketi kullanmaktır.

Güvenliği ihlal edilmiş bir çözüm, metin gölgesiyle kalın, örneğin:

metin gölgesi: 0 0,01 piksel siyah;

Daha iyi karşılaştırma için şu örnekleri yarattım:

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-shadowGerçekten düşük bir değere geçmek blur-radius, bulanıklaştırma etkisini o kadar belirgin hale getirmeyecektir.

Genel olarak text-shadowmetniniz ne kadar cesur olursa o kadar harf alırsınız ama aynı zamanda harflerin orijinal şeklini kaybedersiniz.

Sizi uyarmalıyım ki blur-radius, kesirleri ayarlamanın tüm tarayıcılarda aynı olmayacağı! Örneğin Safari, Chrome'un yaptığı gibi işlemek için daha büyük değerlere ihtiyaç duyar.

Genişliği ayarlayamazsanız, metin kalınlaştıkça genişliğin değişeceği anlamına gelir. Her durum için dolgu / kenar boşluklarını değiştirmek gibi tavizler dışında bundan kaçınmanın bir yolu yoktur.

Başka bir fikir 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>

Jquery'de bir satır:

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

edit: Bu çözüm getirebilir, ancak bir orijinal yazı kod ile birlikte çalışmadığını belirtmek gerekir. Genişlik ayarının etkili olması ve yatay menünün istendiği gibi çalışması için "display: inline" değişken parametrelerle değiştirilmelidir.

CSS3 Çözümü - Deneysel

Burada kimsenin önermediği farklı bir çözümü paylaşmayı düşündüm. text-strokeBunun için kullanışlı olacak bir özellik var .

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

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

Burada, spanetiketin içindeki metni hedefliyorum ve belirli bir metnin stilini blacksimüle edecek bir piksel ile kontur ediyoruz bold.

Bu özelliğin şu anda yaygın olarak desteklenmediğini unutmayın (şu an bu cevabı yazarken) bunu yalnızca Chrome ve Firefox destekliyor gibi görünüyor. Tarayıcı desteği hakkında daha fazla bilgi text-strokeiçin CanIUse'a bakabilirsiniz .

Sadece bazı ekstra şeyleri paylaşmak için, konturunuz için -webkit-text-stroke-width: 1px;a ayarlamak istemiyorsanız kullanabilirsiniz color.

Gibi bir şey kullanabilirsiniz

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

ve sonra css'nizde span içeriğini kalın olarak ayarlayın ve görünürlükle gizleyin: gizli, böylece boyutlarını korur. Ardından, düzgün şekilde sığması için aşağıdaki öğelerin kenar boşluklarını ayarlayabilirsiniz.

Bu yaklaşım SEO dostu olsa emin değilim.

Sorunu "gölge" çözümü ile çözdüm. En basit ve etkili görünüyor.

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

Gölgeyi üç kez tekrarlamaya gerek yok (sonuç benim için aynıydı).

Seninkine benzer bir sorunum vardı. Bağlantılarımın üzerine geldiğinizde yalnızca menüde değil, metinde de kalın olmasını istedim. Tahmin ettiğiniz gibi, tüm farklı genişlikleri bulmak gerçek bir angarya olurdu. Çözüm oldukça basit:

Bağlantı metnini kalın ancak arka planınız gibi renkli, ancak gerçek bağlantınızı içeren bir kutu oluşturun. İşte sayfamdan bir örnek:

CSS:

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

Elbette # FFFFE0 değerini sayfanızın arka plan rengiyle değiştirmeniz gerekir. Z-endeksleri gerekli görünmüyor ama ben yine de onları koymak (HTML kodu "hiper" öğesinden sonra "hipo" öğesi ortaya çıkacağı gibi). Şimdi, sayfanıza bir bağlantı eklemek için aşağıdakileri ekleyin:

HTML:

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

İkinci "burada" görünmez olacak ve bağlantınızın altında gizlenecektir. Bu, bağlantı metniniz kalın harflerle gösterilen statik bir kutu olduğundan metninizin geri kalanı, bağlantının üzerine gelmeden önce kaydırıldığı için artık kaymayacaktır.

Umarım yardım edebilirim :).

Elveda

"Margin" özelliğiyle çalışabilirsiniz:

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

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

Sol ve sağ kenar boşluğunun yeterince büyük olduğundan emin olun, böylece fazladan boşluk kalın metin içerebilir. Uzun kelimeler için farklı kenar boşlukları seçebilirsiniz. Bu sadece başka bir çözüm ama bu işi benim için yapıyor.

Bunun yerine metin gölgesi kullanmayı seviyorum. Özellikle metin gölgesini canlandırmak için geçişleri kullanabileceğiniz için.

Gerçekten ihtiyacınız olan şey:

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

Tam bir gezinme için şu jsfiddle'a bakın: https://jsfiddle.net/831r3yrb/

Tarayıcı desteği ve metin gölgesi hakkında daha fazla bilgi: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Fareyle üzerine gelindiğinde yazı tiplerini (°) değiştirmeye karşı tavsiye ederim. Bu durumda sadece menü öğeleri biraz hareket ediyor, ancak genişlemenin fazladan bir sözcük kaydırmasına neden olduğu için tüm paragrafın yeniden biçimlendirildiği durumları gördüm. Yaptığınız tek şey imleci hareket ettirmek olduğunda bunun olmasını istemezsiniz; hiçbir şey yapmazsanız sayfa düzeni değişmemelidir.

Vites normal ve italik arasında geçiş yaparken de olabilir. Renkleri değiştirmeyi dener veya metnin altında yer varsa alt çizgiyi değiştiririm. (alt çizgi alt kenarlıktan net kalmalıdır)

Form Tasarım sınıfım için yazı tiplerini değiştirirsem boo'd olurdum :-)

(°) Yazı tipi sözcüğü genellikle yanlış kullanılır. "Verdana" bir yazıtipi , "Verdana normal" ve "Verdana bold" aynı yazıtipinin farklı yazı tipleridir .

Bazıları burada belirtildiği gibi metin-gölge çözümü kullanıyorum:

text-shadow: 0 0 0.01px;

fark, gölge rengini belirtmem, bu nedenle bu çözüm tüm yazı tipi renkleri için evrenseldir.

Alternatif bir yaklaşım, kalın metinleri metin gölgesi aracılığıyla "taklit etmek" olacaktır. Bu yazı tipi simgeleri üzerinde çalışmak için bonus (/ durumunuza bağlı malus) vardır.

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

Biraz hacky, metnin çoğaltılmasından sizi kurtarmasına rağmen (bu benim durumumda olduğu gibi çok fazla ise yararlıdır).

Tercih ettiğim çözüm bu. Biraz JS gerektirir, ancak başlık özelliğinizin tam olarak aynı olması gerekmez ve CSS'niz çok basit kalabilir.

$('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>

Peki buna ne dersin? Javascript - CSS3 içermeyen bir çözüm.

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>

Çok şık bir çözüm değil, ama "çalışıyor":

a
{
    color: #fff;
}

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

Tamamen js kapalı emmek ve jQuery biraz daha iyi bir şey sağlamak için yukarıdaki teknikleri bir demet birleştirdim. Tarayıcıların alt piksel harf aralığı için desteği arttığına göre, bunu kullanmak gerçekten güzel.

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>

Kullanımı daha iyidir bir :: önce yerine bir :: sonra böyle:

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

Daha fazla bilgi için: https://jsfiddle.net/r25foavy/

Fareyle üzerine gelindiğinde kalın bir başarı elde ettiğimde menü düzeltildi. Duyarlı destek, bu benim kodum:

(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);

Javascript kullanmaktan kaçınmıyorsanız, sayfa gösterildikten sonra uygun genişliği ayarlayabilirsiniz. İşte (Prototip kullanarak) nasıl yaptım:

$$('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' });
}

Birisi size sorunun basit bir çözümü olduğunda böyle bir şey yapmamanızı söylediğinde gerçekten dayanamıyorum. Li öğeleri hakkında emin değilim, ama aynı sorunu çözdüm. Div etiketlerinden oluşan bir menüm var.

Div etiketini "display: inline-block" olarak ayarlayın. Satıriçi olarak yan yana otururlar ve böylece bir genişlik ayarlayabilirsiniz. Kalınlığı, kalın yazıya sığacak kadar geniş ayarlayın ve metin merkezini hizalayın.

(Not: Bu benim html sıyırma gibi görünüyor [aşağıda], ancak her menü öğesinin etrafında corrasponding ID ve sınıf adı SearchBar_Cateogory ile sarılmış bir div etiketi vardı. Yani: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (Her menü öğesinin etrafına sarılmış bağlantı etiketleri vardı, ancak yeni bir kullanıcı olarak gönderemedim)

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

CSS:

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

bunu dene:

.nav {
  font-family: monospace;
}

Kalın metin normalden daha genişse negatif kenar boşluklarını da deneyebilirsiniz. (her zaman değil) Yani fikir: hover durumunu stilize etmek için sınıfları kullanmaktır.

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

CSS:

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

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

Umarım yardımcı olabilmişimdir!