CSS：如何加粗文本而不改变其容器的大小

Question

CSS：如何加粗文本而不改变其容器的大小

cssfontsmenu

208

我有一个水平导航菜单，基本上只是一个 <ul>，其中的元素并排设置。我没有定义宽度，而是使用填充，因为我希望宽度由菜单项的宽度定义。我加粗当前选定的项目。

问题在于加粗会使单词略微变宽，这会导致其余元素略微向左或向右移动。有没有巧妙的方法可以防止这种情况发生？例如告诉填充忽略加粗导致的额外宽度？我的第一个想法是从“活动”元素的填充中减去几个像素，但这个量是变化的。

如果可能，我想避免对每个条目设置静态宽度，然后居中，而是使用我目前拥有的填充解决方案，以便将来更改条目变得简单。

- Mala

改变大小为什么是个问题？它是否会破坏布局？ - Chaulky

我认为关于Web编程的问题最好在Stack Overflow上提问。也许管理员会将其迁移到那里。 - Ciaran

5

Chaulky：因为在布局方面，我最讨厌的事情之一就是那些你应该尝试点击的按钮会跳来跳去。 - Mala

我找到了一个解决方案，正是John和Blowski在讨论中提到的jscript。链接为http://doejo.com/blog/css-jquery-navigation-with-menu-items-enlarging-on-hover-without-shifting-adjacent-elements。 - thebulfrog

3

可能是在悬停时加粗的内联元素会移动的重复问题。 - Preview

以下是一个 JavaScript 解决方案，可用于水平和垂直菜单的干净渲染，无需移动菜单。只是晚了 11 年... :) 请参见 https://dev59.com/vm025IYBdhLWcg3w_rBA#73028356。 - EML

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrus · Answer 1

你可以像亚马逊网站的“按部门购物”悬停菜单一样实现这个功能。它使用了宽度较大的 div 元素。你可以创建一个宽度较大的 div 并隐藏其右侧部分。

- Erik · Answer 2

更新：由于在IE11中，当我使用visibility:hidden时，伪类i:after没有显示，因此我不得不使用B标签来表示标题。

在我的情况下，我想要将（自定义设计的）输入复选框/单选按钮与标签文本对齐，其中文本在输入被选中时变粗。

这里提供的解决方案在Chrome中对我无效。输入和标签的垂直对齐受到了:after伪类的干扰，而-margins并不能解决这个问题。

这是一个修复方法，您可以避免垂直对齐的问题。

/* checkbox and radiobutton */
label
{
    position: relative;
    display: inline-block;
    padding-left: 30px;
    line-height: 28px;
}

/* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */
label > input + b + i
{
    font-weight: bold;
    font-style: normal;
    visibility: hidden;
}

label > input:checked + b + i
{
    visibility: visible;
}

/* set title attribute of label > b */
label > input + b:after
{
    display: block;
    content: attr(title);
    font-weight: normal;
    position: absolute;
    left: 30px;
    top: -2px;
    visibility: visible;
}

label > input:checked + b:after
{
    display: none;
}

label > input[type="radio"],
label > input[type="checkbox"]
{
    position: absolute;
    visibility: hidden;
    left: 0px;
    margin: 0px;
    top: 50%;
    transform: translateY(-50%);
}

    label > input[type="radio"] + b,
    label > input[type="checkbox"]  + b
    {
        display: block;
        position: absolute;
        left: 0px;
        margin: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-color: #00a1a6;
        border-radius: 3px;
    }

    label > input[type="radio"] + b
    {
        border-radius: 50%;
    }

    label > input:checked + b:before
    {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        content: '';
        border-width: 0px 3px 3px 0px;
        border-style: solid;
        border-color: #fff;
        width: 4px;
        height: 8px;
        border-radius: 0px;
    }

    label > input[type="checkbox"]:checked + b:before
    {
        transform: translate(-50%, -60%) rotate(45deg);
    }

    label > input[type="radio"]:checked + b:before
    {
        border-width: 0px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label>
<label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>

- Dave · Answer 3

有趣的问题。我猜测您在使用float，对吧？

嗯，我不知道任何可以用来摆脱这种字体放大的技术，因此它们会尝试适应所需的最小宽度 - 不同的字体厚度将改变这个值。

我知道的唯一解决方案是避免更改大小，但正如您所说，您不想这样做：将li设置为固定大小。

- Jonathan Rys · Answer 4

为了提供另一种解决方案（因为我也想要文本阴影），我能够通过以下方式实现：

.menu {
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
}
.text-shadow {
  padding: 0 0.375rem;
}
.text-shadow:first-of-type,
.text-shadow:last-of-type {
  padding: 0 0.075rem;
}
.text-shadow:hover {
  text-shadow: 1px 1px white;
  font-weight: 900;
  padding: 0;
}

<nav class="menu">
  <div class="text-shadow">Item 1</div>
  <div class="text-shadow">Item 2</div>
  <div class="text-shadow">Item 3</div>
</nav>