Elemen sejajar bergeser saat dibuat tebal saat melayang

Saya membuat menu horizontal menggunakan daftar HTML dan CSS. Semuanya berfungsi sebagaimana mestinya kecuali ketika Anda mengarahkan kursor ke tautan. Anda lihat, saya membuat status hover tebal untuk tautan, dan sekarang tautan menu bergeser karena perbedaan ukuran tebal.

Saya mengalami masalah yang sama dengan posting SitePoint ini . Namun, pos tersebut tidak memiliki solusi yang tepat. Saya telah mencari solusi di mana-mana dan tidak dapat menemukannya. Tentunya saya tidak bisa menjadi satu-satunya yang mencoba melakukan ini.

Adakah yang punya ide?

PS: Saya tidak tahu lebar teks dalam item menu jadi saya tidak bisa hanya mengatur lebar item li.

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

Periksa contoh kerja di JSfiddle . Idenya adalah untuk memesan ruang untuk konten yang dicetak tebal (atau :hovergaya apa pun ) dalam :beforeelemen semu dan menggunakan tag judul sebagai sumber untuk konten.

Solusi yang dikompromikan adalah dengan memalsukan huruf tebal dengan teks-bayangan, misalnya:

text-shadow: 0 0 0,01px hitam;

Untuk perbandingan yang lebih baik saya membuat contoh-contoh ini:

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>

Melewati text-shadownilai yang sangat rendah blur-radiusakan membuat efek kabur tidak begitu terlihat.

Secara umum semakin Anda mengulangi text-shadowsemakin berani teks Anda akan tetapi pada saat yang sama kehilangan bentuk asli huruf.

Saya harus memperingatkan Anda bahwa pengaturan blur-radiusfraksi tidak akan membuat yang sama di semua browser! Safari misalnya membutuhkan nilai yang lebih besar untuk menyajikannya dengan cara yang sama seperti Chrome.

Jika Anda tidak dapat mengatur lebar, maka itu berarti lebar akan berubah ketika teks menjadi tebal. Tidak ada cara untuk menghindari ini, kecuali dengan kompromi seperti memodifikasi padding / margin untuk setiap negara.

Gagasan lain adalah menggunakan 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>

Satu baris dalam jquery:

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

sunting: Walaupun ini dapat menghasilkan solusi, orang harus menyebutkan bahwa itu tidak bekerja bersama dengan kode di posting asli. "display: inline" harus diganti dengan parameter mengambang agar pengaturan lebar menjadi efektif dan menu horizontal itu berfungsi sebagaimana mestinya.

Solusi CSS3 - Eksperimental

Pemikiran untuk berbagi solusi berbeda yang tidak disarankan di sini. Ada properti yang disebut text-strokeyang akan berguna untuk ini.

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

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

Di sini, saya menargetkan teks di dalam spantag dan kami membelai dengan piksel blackyang akan mensimulasikan boldgaya untuk teks tertentu.

Perhatikan bahwa properti ini tidak didukung secara luas, seperti sekarang (saat menulis jawaban ini), hanya Chrome dan Firefox yang tampaknya mendukung ini. Untuk informasi lebih lanjut tentang dukungan browser untuk text-stroke, Anda dapat merujuk ke CanIUse .

Hanya untuk berbagi beberapa hal tambahan, Anda dapat menggunakan -webkit-text-stroke-width: 1px;jika Anda tidak ingin menetapkan coloruntuk stroke Anda.

Anda bisa menggunakan sejenisnya

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

dan kemudian di css Anda cukup atur konten rentang dengan tebal dan sembunyikan dengan visibilitas: disembunyikan, sehingga menjaga dimensinya. Kemudian Anda dapat menyesuaikan margin elemen-elemen berikut untuk membuatnya cocok dengan benar.

Saya tidak yakin apakah pendekatan ini ramah SEO.

Saya baru saja memecahkan masalah dengan solusi "bayangan". Tampaknya yang paling sederhana dan efektif.

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

Tidak perlu mengulangi bayangan tiga kali (hasilnya sama untuk saya).

Saya punya masalah yang serupa dengan masalah Anda. Saya ingin tautan saya dicetak tebal saat Anda mengarahkan kursor, tetapi tidak hanya di menu tetapi juga di teks. Ketika Anda menebak itu akan menjadi tugas nyata mencari tahu semua lebar yang berbeda. Solusinya cukup sederhana:

Buat kotak yang berisi teks tautan dalam huruf tebal tetapi berwarna seperti latar belakang Anda dan tetapi tautan asli Anda di atasnya. Ini contoh dari halaman saya:

CSS:

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

Tentu saja Anda perlu mengganti # FFFFE0 dengan warna latar belakang halaman Anda. Indeks-z tampaknya tidak perlu tetapi saya tetap menempatkannya (karena elemen "hypo" akan muncul setelah elemen "hyper" dalam HTML-Code). Sekarang, untuk menaruh tautan di halaman Anda, sertakan yang berikut ini:

HTML:

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

Yang kedua "di sini" tidak akan terlihat dan disembunyikan di bawah tautan Anda. Karena ini adalah kotak statis dengan teks tautan Anda dalam huruf tebal, sisa teks Anda tidak akan bergeser lebih lama karena sudah bergeser sebelum Anda mengarahkan kursor ke tautan.

Semoga saya bisa membantu :).

Sangat lama

Anda dapat bekerja dengan properti "margin":

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

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

Pastikan margin kiri dan kanan cukup besar sehingga ruang ekstra dapat berisi teks tebal. Untuk kata-kata panjang, Anda dapat memilih margin yang berbeda. Ini hanyalah solusi lain tetapi melakukan pekerjaan untuk saya.

Saya lebih suka menggunakan text-shadow. Terutama karena Anda dapat menggunakan transisi untuk menghidupkan bayangan teks.

Yang Anda butuhkan adalah:

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

Untuk navigasi lengkap lihat jsfiddle ini: https://jsfiddle.net/831r3yrb/

Dukungan browser dan info lebih lanjut tentang bayangan teks: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Saya akan menyarankan agar beralih font (°) pada hover. Dalam hal ini hanya item menu yang bergerak sedikit, tetapi saya telah melihat kasus di mana paragraf lengkap akan diformat ulang karena pelebaran menyebabkan bungkus kata tambahan. Anda tidak ingin melihat ini terjadi ketika satu-satunya hal yang Anda lakukan adalah memindahkan kursor; jika Anda tidak melakukan apa pun, tata letak halaman tidak boleh berubah.

Pergeseran juga dapat terjadi ketika beralih antara normal dan miring. Saya akan mencoba mengubah warna, atau beralih garis bawah jika Anda memiliki ruang di bawah teks. (garis bawah harus tetap jelas dari batas bawah)

Saya akan dicemooh jika saya menggunakan pergantian font untuk kelas Desain Formulir saya :-)

(°) Kata font sering disalahgunakan. "Verdana" adalah jenis huruf , "Verdana normal" dan "Verdana bold" adalah font yang berbeda dari jenis huruf yang sama.

Saya menggunakan solusi teks-bayangan seperti yang disebutkan di sini:

text-shadow: 0 0 0.01px;

perbedaannya adalah saya tidak menentukan warna bayangan, jadi solusi ini bersifat universal untuk semua warna font.

Pendekatan alternatif adalah "meniru" teks tebal melalui text-shadow. Ini memiliki bonus (/ malus, tergantung pada kasus Anda) untuk bekerja juga pada ikon font.

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

Agak hacky, meskipun itu menyelamatkan Anda dari menggandakan teks (yang berguna jika banyak, seperti dalam kasus saya).

Ini solusi yang saya sukai. Ini membutuhkan sedikit JS tetapi Anda tidak perlu properti judul Anda sama persis dan CSS Anda bisa tetap sangat sederhana.

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

Bagaimana dengan ini? Solusi javascript - CSS3 gratis.

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>

Bukan solusi yang sangat elegan, tetapi "berhasil":

a
{
    color: #fff;
}

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

Saya telah menggabungkan banyak teknik di atas untuk memberikan sesuatu yang tidak sepenuhnya menyedot dengan js dimatikan dan bahkan lebih baik dengan sedikit jQuery. Sekarang dukungan browser untuk penempatan huruf subpixel membaik, sangat bagus untuk menggunakannya.

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>

Lebih baik menggunakan :: sebelum daripada :: setelah seperti ini:

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

Untuk detail lebih lanjut: https://jsfiddle.net/r25foavy/

Saya memperbaiki menu ketika membawa kesuksesan yang berani. Ini mendukung responsif, ini kode saya:

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

Jika Anda tidak suka menggunakan Javascript, Anda dapat mengatur lebar yang tepat setelah halaman ditampilkan. Inilah cara saya melakukannya (menggunakan Prototipe):

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

Saya benar-benar tidak tahan ketika seseorang mengatakan kepada Anda untuk tidak melakukan sesuatu seperti itu ketika ada solusi sederhana untuk masalah tersebut. Saya tidak yakin tentang elemen li, tapi saya baru saja memperbaiki masalah yang sama. Saya memiliki menu yang terdiri dari tag div.

Cukup atur tag div menjadi "display: inline-block". Sebaris sehingga mereka duduk bersebelahan dan menghalangi agar Anda dapat mengatur lebar. Cukup atur lebarnya cukup lebar untuk mengakomodasi teks yang dicetak tebal dan atur pusat teks.

(Catatan: Tampaknya menghapus html saya [di bawah], tetapi setiap item menu memiliki tag div yang dililitkan dengan ID korespondensi dan nama kelas SearchBar_Cateogory. Yaitu: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (saya memiliki tag jangkar yang melilit setiap item menu, tetapi saya tidak dapat mengirimkannya sebagai pengguna baru)

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

coba ini:

.nav {
  font-family: monospace;
}

Anda juga dapat mencoba margin negatif jika teks tebal lebih lebar dari biasanya. (tidak selalu) Jadi idenya adalah menggunakan kelas sebagai ganti style: hover state.

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

Saya harap saya bisa membantu!