7

我正在使用 CSS 将一些单选按钮设置为选项卡。我希望“选定”选项卡的字体粗细为粗体。当然，这会导致选项卡的大小增加，因为文本占用更多空间。我想找到一种方法让文本从粗体变为非粗体，而“标签”不会改变大小

选项卡 1 已选择

选项卡 2 已选择

如果没有设置固定宽度，是否有一种巧妙而干净的方法可以使文本占据粗体文本的大小而实际上不加粗？

我能想到的唯一方法是存在粗体文本（导致文本在 HTML 中存在两次），但使用visibility: hidden.

标记：

<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>

现在的相关CSS：

.tab {
  display: block;
  font-size: 1.2em;
  height: 2em;
  line-height: 2em;
  margin-right: 1px;
  padding: 0 2em;
  position: relative;
  text-align: center;
  float: left;
}
.tab.active,
.tab:hover {
  font-weight: bold;
}
.tab input[type=radio] {
  display: none;
}
4

2 回答 2

2

还有一个使用幽灵元素的解决方案。只需使用位于可见区域下方的粗体样式的相同文本：

HTML：

<div class="link">
    <div class="text">Sample Text</div>
    <div class="ghost">Sample Text</div>
</div>

CSS：

.link {
    border: 1px #000 solid;
    display: inline-block;
}

.link .ghost {
    color: transparent;
    font-weight: bold;
}

.link .text {
    position: absolute;
    text-align: center;
}

.link .text:hover {
    font-weight: bold;
}

这是一个jsFiddle来检查一下！

唯一需要注意的是可见文本不在外部 div 中居中。也许有人可以从这里接？！

于 2013-02-15T17:21:07.640 回答
1

那 CSSletter-spacing呢？结果将接近所需的结果：

.tab
{
    letter-spacing: 1.5px;
}

.tab.active, .tab:hover 
{
    letter-spacing: normal;
}

jsfiddle 示例

于 2013-02-15T17:03:49.270 回答