호버에 굵게 표시된 경우 인라인 요소가 이동합니다.
HTML 목록과 CSS를 사용하여 가로 메뉴를 만들었습니다.링크 위에 마우스를 올려 놓을 때를 제외하고는 모든 것이 정상적으로 작동합니다.보시다시피 링크에 대해 굵은 호버 상태를 생성했는데, 이제 굵은 크기 차이로 인해 메뉴 링크가 이동합니다.
이 SitePoint 게시물과 동일한 문제가 발생합니다.하지만, 그 게시물에는 적절한 해결책이 없습니다.저는 해결책을 찾기 위해 모든 곳을 검색했지만 찾을 수 없었습니다.확실히 나만 이렇게 하려고 할 수는 없습니다.
아이디어 있는 사람?
추신: 저는 메뉴 항목의 텍스트 너비를 모르기 때문에 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>상위 호버 스타일과 내용 및 스타일이 동일한 보이지 않는 유사 요소를 사용하여 너비를 미리 설정합니다.다음과 같은 데이터 속성 사용title컨텐츠의 소스로서.
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;
}
/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
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>손상된 해결책은 텍스트 그림자를 사용하여 굵은 글씨로 위장하는 것입니다. 예를 들어 다음과 같습니다.
텍스트 표시: 0 0.01인치 검은색;
더 나은 비교를 위해 다음 예제를 만들었습니다.
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를 들어, 더 큰 합니다.예를 들어 사파리는 크롬과 같은 방식으로 렌더링하려면 더 큰 값이 필요합니다.
는 또다아어는디이를 사용하는 입니다.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의 한 줄:
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
편집: 이것은 해결책을 가져올 수 있지만, 원래 게시물의 코드와 함께 작동하지 않는다는 것을 언급해야 합니다.너비 설정을 적용하고 수평 메뉴를 원하는 대로 작동하려면 "display:display"를 부동 매개변수로 대체해야 합니다.
CSS3 솔루션 - 실험용
(Fake boldness)여기서 아무도 제안하지 않은 다른 해결책을 공유하려고 생각했습니다.라는 부동산이 있습니다.text-stroke이것에 유용할 것입니다.
p span:hover {
-webkit-text-stroke: 1px black;
}<p>Some stuff, <span>hover this,</span> it's cool</p>여기, 나는 그 안에 있는 텍스트를 목표로 하고 있습니다.span태그를 지정하고 우리는 그것을 픽셀 단위로 쓰다듬습니다.black그것은 시뮬레이션이 될 것입니다.bold스타일을 입력합니다.
이 속성은 현재 널리 지원되지 않으며(이 답변을 작성하는 동안) Chrome 및 Firefox만 이 속성을 지원하는 것으로 보입니다.에 대한 을 참조하십시오.text-stroke당신은 캔을 참조할 수 있습니다.저는.
여분의 것을 , 은 몇가추인것공는위해유기하들당신, 은지가적(을)를 사용할 수 .-webkit-text-stroke-width: 1px;이 생없할다면이각정을 .color당신을 위해.
목록 항목의 너비를 미리 설정하지 않으려면 목록 항목에서 단일 너비 글꼴을 사용하는 것이 좋습니다.
단일 공간 글꼴과는 달리, 여전히 비례 글꼴입니다. 하지만 서로 다른 글꼴 무게에 걸쳐 같은 크기를 차지합니다.크기를 일정하게 유지하기 위해 CSS, JS 또는 고급 해킹이 필요하지 않습니다.그것은 바로 서체에 구워집니다.
저는 이것이 이 흔한 문제에 대한 정말 우아한 해결책이라고 생각합니다.
다음은 비례 글꼴 IBM Plex Sans와 유니폭 Recursive를 비교한 이 우수한 문서의 예입니다.
비례 글꼴(IBM Plex Sans)에서 목록 항목은 굵게 표시된 글꼴에서 크기가 변경될 때 변경됩니다.Uniwidth 글꼴 Recursive를 사용하면 항목을 마우스로 가리키면 굵게 표시되지만 크기는 변경되지 않습니다.
사용할 수 있는 무료 유니폭 글꼴은 다음과 같습니다.
또한 위의 문서를 통해 에 연결된 무료가 아닌 많은 옵션이 있습니다.
당신은 다음과 같은 것을 사용할 수 있습니다.
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
그런 다음 CSS에서 스팬 콘텐츠를 굵게 설정하고 가시성으로 숨기기만 하면 됩니다. 숨김으로써 치수를 유지할 수 있습니다.그런 다음 다음 요소의 여백을 조정하여 적합하게 만들 수 있습니다.
하지만 이 접근법이 SEO 친화적인지는 잘 모르겠습니다.
저는 방금 "그림자" 솔루션으로 문제를 해결했습니다.그것은 가장 간단하고 효과적인 것 같습니다.
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
그림자를 세 번 반복할 필요가 없습니다(결과는 저도 마찬가지였습니다).
여기에 언급된 일부 텍스트 섀도 솔루션을 사용합니다.
text-shadow: 0 0 0.01px;
차이점은 그림자 색을 지정하지 않아서 이 솔루션은 모든 글꼴 색에 대해 보편적이라는 것입니다.
저도 당신과 비슷한 문제가 있었습니다.메뉴뿐만 아니라 텍스트에서도 링크를 마우스로 가리킬 때 내 링크가 굵어지기를 원했습니다.여러분이 짐작하듯이, 모든 다른 너비를 알아내는 것은 정말 힘든 일이 될 것입니다.솔루션은 매우 간단합니다.
배경처럼 굵지만 색상이 지정된 링크 텍스트가 포함된 상자를 만들고 그 위에 실제 링크를 만듭니다.다음은 제 페이지의 예입니다.
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
물론 페이지의 배경색으로 #FFFE0을 대체해야 합니다.z-index는 필요하지 않은 것 같지만 어쨌든 넣었습니다(HTML-Code의 "hyper" 요소 뒤에 "hypo" 요소가 발생하기 때문입니다).이제 페이지에 링크를 추가하려면 다음을 포함합니다.
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
두 번째 "여기"는 보이지 않고 링크 아래에 숨겨집니다.이 상자는 링크 텍스트가 굵게 표시된 정적 상자이므로 링크 위에 마우스를 올리기 전에 텍스트가 이미 이동되어 있으므로 나머지 텍스트는 더 이상 이동되지 않습니다.
저는 대신 문자 그림자를 사용하는 것을 좋아합니다.특히 변환을 사용하여 텍스트 그림자를 애니메이션화할 수 있기 때문입니다.
필요한 것은 다음과 같습니다.
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
다른 방법은 텍스트 그림자를 통해 굵은 텍스트를 "에뮬레이트"하는 것입니다.이것은 글꼴 아이콘에서도 작동할 수 있는 보너스(/경우에 따라 malus)가 있습니다.
nav li a:hover {
text-decoration: none;
text-shadow: 0 0 1px; /* "bold" */
}
약간 진부하지만, 텍스트 복제(나의 경우처럼 많으면 유용함)로부터 당신을 보호합니다.
"마진" 속성으로 작업할 수 있습니다.
li a {
margin: 0px 5px 0px 5px;
}
li a:hover {
margin: 0;
font-weight: bold;
}
왼쪽과 오른쪽 여백이 충분히 커야 추가 공간에 굵은 텍스트가 포함될 수 있습니다.긴 단어의 경우 다른 여백을 선택할 수 있습니다.또 다른 해결책일 뿐이지만 저를 위해 그 일을 하는 것입니다.
글꼴을 전환하지 않는 것이 좋습니다(°).공중에 떠 있는이 경우에는 메뉴 항목만 약간 이동하지만 확장으로 인해 추가 단어 모음이 발생하기 때문에 전체 문단이 다시 포맷되는 경우를 보았습니다.커서를 이동하는 것만으로 페이지 레이아웃이 변경되지 않을 경우 페이지 레이아웃이 변경되지 않습니다.
정상과 기울임꼴로 전환할 때도 전환이 발생할 수 있습니다.텍스트 아래에 공간이 있다면 색상을 변경하거나 밑줄을 전환해 보겠습니다.(밑단 테두리에서 밑줄이 선명하게 유지되어야 합니다.)
폼 디자인 수업에 전환 글꼴을 사용한다면 저는 붐빌 것입니다 :-)
(°) 글꼴이라는 단어는 종종 잘못 사용됩니다."Verdana"는 서체이고 "Verdana normal"과 "Verdana bold"는 동일한 서체의 서로 다른 글꼴입니다.
매우 우아한 솔루션은 아니지만 "효과적"입니다.
a
{
color: #fff;
}
a:hover
{
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
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>사용하다letter-spacing와 함께text-shadow:
a {
letter-spacing: .1em;
}
a:hover {
text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}
저는 몇 줄의 자바스크립트로 이것을 해결했습니다.
$('a.menu_item').each(function() {
let width = $(this).width();
$(this).css('width',width + 'px');
});
여기서 훌륭하지만 매우 흥미로운 답변을 많이 볼 수 있습니다.너비를 재설정하거나 숨겨진 요소를 추가하거나 다른 레이아웃 선언을 위해 요소를 재작업할 필요가 없습니다.가장 간단한 해결책은 호버 선언의 글꼴 크기를 약간 더 작은 크기로 조정하여 굵게 표시된 텍스트에서 크기가 증가하는 것을 고려하는 것입니다.예를 들어 글꼴 크기: 일반적인 1em 선언의 .985em과 마찬가지로, 호잉 시 텍스트가 굵게 표시될 뿐만 아니라 원래 크기 모양을 유지할 수 있습니다.
이것이 제가 선호하는 해결책입니다.약간의 JS가 필요하지만 타이틀 속성이 완전히 같을 필요는 없으며 CSS는 매우 단순하게 유지될 수 있습니다.
$('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>이건 어때요?Javascript - 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>
저는 위의 여러 기술을 결합하여 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>다음과 같이 a:::fore를 사용하는 것이 좋습니다.
.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/ .
저는 대담한 성공을 호버할 때 메뉴를 고쳤습니다.응답성을 지원합니다. 제 코드는 다음과 같습니다.
(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);
두 가지 변형 모델을 제안할 수 있습니다.
첫 번째 옵션: 각 목록 항목의 너비를 %로 설정합니다.
여기 간단한 예가 있습니다.
<ul>
<li><a href="#">First Item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
</ul>
li {
list-style-type: none;
display: inline-block;
width: 24%;
}
a {
text-decoration: none;
color: #333;
font-size: 1.4em;
background: #A5C77F;
display: block;
padding: 10px 15px;
margin: 10px 0;
border-right: 1px solid whitesmoke;
transition: font-weight .3s;
}
a:hover {
font-weight: bold;
}
두 번째 옵션은 활성 요소에 텍스트 그림자를 사용하는 것입니다.
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
그러나 첫 번째 옵션, 즉 각 요소에 대한 너비를 백분율로 지정하는 것이 좋습니다. 왜냐하면 텍스트 그림자는 모바일 브라우저에서 항상 작동하지 않기 때문입니다.
Javascript를 사용하는 것을 반대하지 않는다면, 페이지가 나타나면 적절한 너비를 설정할 수 있습니다.프로토타입 사용 방법은 다음과 같습니다.
$$('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' });
}
문제에 대한 간단한 해결책이 있을 때 누군가가 당신에게 그런 식으로 어떤 일을 하지 말라고 할 때 저는 정말 참을 수 없습니다.li 요소에 대해서는 잘 모르겠지만, 방금 같은 문제를 수정했습니다.저는 div 태그로 구성된 메뉴를 가지고 있습니다.
div 태그를 "display: inline-block"으로 설정하면 됩니다.인라인을 사용하여 서로 옆에 앉고 너비를 설정할 수 있도록 차단합니다.굵게 표시된 텍스트를 수용할 수 있을 만큼의 너비를 설정하고 텍스트 센터를 정렬하기만 하면 됩니다.
(참고: 내 html [아래]를 제거하는 것처럼 보이지만, 각 메뉴 항목에는 해당 ID와 클래스 이름 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>|
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;
}
사용해 보십시오.
.nav {
font-family: monospace;
}
굵은 글씨가 일반적인 것보다 넓으면 마이너스 여백도 시도할 수 있습니다.(항상 그렇지는 않습니다) 대신 클래스를 사용하여 :hover 상태를 스타일화하는 것입니다.
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;
}
제가 도울 수 있기를 바랍니다!
언급URL : https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover
'programing' 카테고리의 다른 글
| iPython 노트북에서 DataFrame을 표로 표시 (0) | 2023.09.06 |
|---|---|
| 추가 열 ASP를 사용하여 사용자 역할 기본 키를 확장합니다.NET 코어 EF (0) | 2023.09.01 |
| 반복 가능 읽기 트랜잭션을 사용하는 경우에도 MariaDB 여러 개의 동일한 행 (0) | 2023.09.01 |
| j변수에 로드 쿼리 (0) | 2023.09.01 |
| jQuery AJAX 오류를 어떻게 잡을 수 있습니까? (0) | 2023.09.01 |