Elemen sejajar bergeser saat dibuat tebal saat melayang


204

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>

Jawaban:


390

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.


20
Sempurna! Ini berfungsi untuk <a> bahkan tanpa menggunakan ul, saya akan menggunakan atribut lain seperti data-teks alih-alih judul.
brittongr

6
Solusi ini bekerja, tetapi lebih baik ketika Anda menambahkan margin-top: -1pxuntuk :aftermenghindari menciptakan ruang 1px tinggi.
micropro.cz

4
@ mattroberts33 :vs ::"Setiap browser yang mendukung ::sintaks kolon ganda CSS3 juga hanya mendukung :sintaks, tetapi IE 8 hanya mendukung kolon-tunggal, jadi untuk sekarang, disarankan untuk menggunakan kolon-tunggal untuk dukungan browser terbaik." css-tricks.com/almanac/selectors/a/after-and-before
gfullam

1
@HughHughTeotl Gunakan ukuran font: 0 untuk ULatau a::after, dengan kata lain - reset semua padding / marging / line-heights / font-size dll.
350D

1
Sayangnya, Anda selalu memiliki tooltip yang ditampilkan :-(
Benedikt

42

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.


6
Ini bahkan lebih jelek daripada solusi berani yang dikomputasi peramban lainnya dan harus dihindari
Zach Saucier

28

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.


2
+1 seperti yang dikatakan Andrew, teks tebal lebih lebar. Fakta kehidupan. Bahkan perbaiki lebar item menu untuk menghindari ini atau hidup dengannya (menghitung ulang padding tidak tepat dan rentan kesalahan).
cletus

Yap, saya cenderung menghindari efek mouseover yang berani karena alasan ini.
Steve Wortham

"Tidak ada cara untuk menghindari ini". Lihat jawaban oleh 350D di bawah ini.
gfullam

Perhatikan juga bahwa jawaban Andrew telah diposting 4 tahun sebelum solusi 350D ditambahkan. Elemen pseudo dengan attr () berfungsi sebagai nilai konten sama sekali tidak mungkin saat itu :) oh waktu berlalu di Stack Overflow. Namun komunitas mengatasinya dan memilikinya adalah jawaban yang diterima dan sebagian besar upvotes, jadi saya senang!
Justus Romijn

25

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>


Apakah itu berfungsi dengan semua browser, khususnya IE10 + dan Safari?
Umair Hafeez

salah satu favorit saya :)
Inc33

1
@UmairHafeez ya semua browser modern mengharapkan opera mini caniuse.com/#feat=css-letter-spacing
John Magnolia

1
Bagaimana Anda tahu bahwa 0,235px adalah jumlah yang sempurna? Apakah ada rumus untuk menghitung jarak apa yang dibutuhkan?
Cold_Class

Tidak, saya pikir itu hanya percobaan dan kesalahan cepat
John Magnolia

17

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.


Bisakah Anda melakukan ini untuk semua tautan di halaman? Artinya, apakah mengganti ul.nav li adengan akarya?
gnzlbg

2
Pertanyaan ini tidak ditandai dengan JS, apalagi jQuery. Tolong jangan posting solusi yang tidak perlu.
Zach Saucier

2
@Zach Saucier Dalam beberapa situasi beberapa devs mungkin lebih suka solusi JS, karena biasanya lebih pendek. Alih-alih menurunkan setiap orang yang memposting sesuatu dengan JS, Anda dapat menambahkan tag JS ke pertanyaan dan membiarkan setiap orang memutuskan solusi mana yang menurut mereka lebih berguna.
lurkit

1
@Zach Saucier Solusi CSS mungkin tidak praktis dalam beberapa situasi. Kadang-kadang Anda mungkin perlu memiliki atribut judul yang berbeda, atau sudah menggunakan elemen :: after pseudo, atau Anda mungkin secara pribadi mempertimbangkan lebih praktis pada situasi tertentu untuk menggunakan satu liner di JS ke beberapa baris CSS. Saya memang menganggap jawaban CSS lebih unggul dalam banyak kasus, tetapi berguna untuk memiliki jawaban JS sebagai opsi tambahan.
lurkit

Ini adalah satu-satunya solusi yang dapat saya temukan yang memecahkan masalah sambil mempertahankan bahkan jarak antar elemen.
Jaiden Mispy

11

Solusi CSS3 - Eksperimental

(Keberanian palsu)

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.


Ini luar biasa
Alan Fitzpatrick

Tip yang bagus. Sayangnya itu masih tidak standar setelah 4 tahun.
Dávid Veszelovszki

5

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.


1
Ini juga tidak ramah pengembang / pemeliharaan
Zach Saucier

5

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


Ini bahkan lebih jelek daripada solusi berani yang dikomputasi peramban lainnya dan harus dihindari
Zach Saucier

4

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


2

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 menggunakan solusi yang serupa, tetapi bagi saya - hanya menambahkan 'margin: 0 -2px' ke gaya hover (dan tidak menambahkan apa pun ke gaya normal) - bekerja dengan baik.
Yuval A.

8
Ini tidak berfungsi jika ada variabilitas sama sekali dalam panjang string Anda
kat

2

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


Ini berfungsi baik dengan menggunakan transisi. Solusi alternatif yang bagus.
Yazmin

1

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.


1

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>


1

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.


1

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


0

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>


0

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>

1
Ini cukup banyak markup tambahan dan CSS untuk memperbaiki masalah ... Ini bukan pengembang, SEO, atau ramah masa depan
Zach Saucier

0

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

0

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>


0

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/


Bisakah Anda memberikan alasan mengapa a::beforelebih baik dari itu a::after? Itu tampak seperti bagian kunci dari jawaban Anda, tetapi tidak jelas mengapa yang satu lebih disukai daripada yang lain dalam hal ini.
nirvdrum

0

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

-1

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

Javascript tidak di-tag dalam pertanyaan, apalagi jQuery. Harap tetap jawab menggunakan bahasa yang ditandai dalam pertanyaan
Zach Saucier

-1

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

1
Ini menggunakan lebar tetap seperti OP yang ditentukan BUKAN kasusnya. Dengan demikian, jawaban ini tidak menjawab pertanyaan yang diajukan
Zach Saucier

-1

coba ini:

.nav {
  font-family: monospace;
}

Bagaimana itu akan mengubah apa pun?
leonheess

@ MiXT4PE Dengan monospace, karakter memiliki ukuran yang sama dalam huruf biasa atau tebal. ukuran tidak akan berubah
Yukulélé

mengubah keluarga font karena itu bukan solusi
funkysoul

Mengubah font-family untuk memperbaiki bug UI bukanlah solusi, karena font-family adalah akar dari semua tipografi merek.
Umair Hafeez

Tipografi adalah bagian besar dari desain UI dan tipografi yang dirancang untuk suatu merek harus memperhitungkan penggunaannya dalam UI. PT Sans dan Clear Sans adalah dua tipografi yang spasi mesin terbangnya serupa di semua bobot. Sayangnya, memang benar bahwa sangat sedikit tipografi (non-monospace) yang memiliki properti ini, dan kemungkinan lebih murah untuk mengimplementasikan salah satu jawaban lain untuk pertanyaan daripada membayar untuk pengembangan tipografi. Namun, itu akan berubah karena ketersediaan font Variabel membaik. Lihat v-fonts.com untuk font dengan lebar + bobot variabel.
Peter W

-3

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!


1
Tolong jangan memposting jawaban dalam bahasa selain yang ditandai. Ini tidak menjawab pertanyaan yang diajukan
Zach Saucier
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.