0

div 包含单行文本作为 li 元素 div 宽度由最宽的项目宽度决定。如果鼠标悬停在某个项目上，其字体样式将变为粗体。

如果将鼠标悬停在宽项目上，粗体字体会导致宽度增加，这会导致 div 宽度也增加。如果鼠标在列表中移动，这看起来很丑陋。如何在不使用硬编码宽度的情况下禁用这种增加？

我尝试了溢出：隐藏样式，如下面的代码所示，但 div 宽度仍然增加。

html:

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product2</a></li>
...

CSS：

.site-leftpane {
    background-color: #FBFBFB;
    clear: left;
    color: Black;
    float: left;
    margin: 0;
    overflow: hidden;
    padding-top: 1em;
}

.tree {
    line-height: 1.6em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

.tree li:first-child {
    font-weight: bold;
}

.tree li a:hover {
    color: #E47911 !important;
    font-weight: bold;
}

更新

我根据建议的答案改变了风格

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

但问题依然存在。网页可以在不同的屏幕分辨率下使用。文本由客户在运行时创建。右侧包含自动使用剩余空间的其他 div。在这种情况下，我不知道如何使用硬编码的最大宽度。max-width 指定允许的最大 div 宽度。通常在这种情况下 div 宽度较小，悬停会导致其增加，因此 max-width 不能解决问题。

4

4 回答 4

2

我遇到了类似的问题，并找到了解决它的一种方法是使用一些 jQuery，简单且有效：

$('.menu-item').each(function() { 
    $(this).css( 'width', $(this).width()+'px' ); 
});

基本上你有jQuery“硬代码”/设置每个类元素的初始宽度，这些元素是由浏览器根据文本长度和字体设置计算的，这样当你将鼠标悬停在每个元素上时，它会改变字体重量文本，那么宽度不会改变，它将保持与最初相同。

于 2017-12-03T01:53:39.570 回答
1

好的，这不是一个很好的答案，但可以提供一个快速修复，其他人可以从中得出一个真正的答案:)

max-width通过为列表中的每个添加重复条目<li>，添加一个基本上隐藏内容的“pad”类，我能够得到你想要的（嗯，模拟一个动态的）。

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product It's a product, yes.</a></li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>

在 CSS 中，我将其添加到末尾：

.tree li.pad {
    line-height: 0;
    font-weight: bold;
    visibility: hidden;
}

它的基本作用是为每个列表项添加隐藏条目，但是pad该类使附加条目的高度为零，但粗体（因此宽度正确）。它有点依赖于您能够生成 HTML 端，以允许添加重复的条目。

但是，我认为这是一个糟糕的解决方案，原因有很多（它添加了冗余数据，它会弄乱任何非可视浏览器，......）。

于 2013-04-04T16:11:49.593 回答
0

尝试将 padding:0px 和 margin:0px 添加到您的 :hover 中，您也可以为您的 div 添加一个最大宽度以将您的宽度保持在单一大小。我认为这可以解决您的问题。

于 2013-04-03T19:03:05.647 回答
0

当您的服务器构建您的页面时，我认为您无法确定实际的像素宽度。

用户浏览器会完成所有这些计算，并且不会真正公开它们（尽管客户端脚本语言和 jQuery 等工具集可以看到最终结果）。

老实说，您最好的选择是为项目分配固定宽度，提前计算好，并接受长文本可能会换行。如果这对您不起作用，您的另一个选择是更改悬停行为。也许您可以更改文本/背景颜色而不是使文本变粗？这将是指示当前悬停项目的另一种方式，它不会改变字符大小或间距。

于 2013-04-04T14:08:13.467 回答