Html 如何避免悬停时div宽度增加

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

如果鼠标放在悬停范围内的项目上，粗体字体会导致宽度增加，这也会导致div宽度增加 增加。 如果鼠标在列表中移动，这看起来非常难看。 如何在不使用硬编码宽度的情况下禁用此增加

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

html:

更新

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

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

但问题依然存在。网页可以使用不同的屏幕分辨率。文本由客户在运行时创建。右侧包含自动使用剩余空间的其他div。

---

我不知道在这种情况下如何使用硬编码的最大宽度。最大宽度指定最大允许div宽度。通常在这种情况下，div width较小，hover导致其增大，因此max width无法解决问题。

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

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

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

用户浏览器执行所有这些计算，但它并没有真正公开这些计算（尽管客户端脚本语言和jQuery等工具集可以看到最终结果）

---

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

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

用户浏览器执行所有这些计算，但它并没有真正公开这些计算（尽管客户端脚本语言和jQuery等工具集可以看到最终结果）

---

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

好的，这不是一个很好的答案，但可能提供一个快速解决方案，其他人可以从中获得真实答案：）

通过在列表中为每个

添加重复条目，添加一个“pad”类，它基本上隐藏了内容，因此我可以通过使用HTML/CSS获得您想要的内容（好吧，模拟动态

最大宽度

）

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

它的基本功能是为每个列表项添加隐藏项，但是

pad

类使附加项的高度为零，但粗体（因此是正确的宽度）。它有点依赖于您能够生成HTML端，以允许添加重复条目

---

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

好的，这不是一个很好的答案，但可能提供了一个快速解决方案，其他人可以从中得出真正的答案：）

通过在列表中为每个

添加重复条目，添加一个“pad”类，它基本上隐藏了内容，因此我可以通过使用HTML/CSS获得您想要的内容（好吧，模拟动态

最大宽度

）

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

它的基本功能是为每个列表项添加隐藏项，但是

pad

类使附加项的高度为零，但粗体（因此是正确的宽度）。它有点依赖于您能够生成HTML端，以允许添加重复条目

---

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

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

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

---

基本上，您需要jQuery“硬代码”/设置浏览器根据文本长度和字体设置计算的每个类元素的初始宽度，这样当您将鼠标悬停在表示更改文本字体重量的每个元素上时，宽度不会更改，它将保持最初的状态。

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

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

---

基本上，您需要jQuery“硬代码”/设置浏览器根据文本长度和字体设置计算的每个类元素的初始宽度，这样当您将鼠标悬停在表示更改文本字体重量的每个元素上时，宽度不会更改，它将保持最初的状态。

列表文本将从数据库中动态读取。如何在运行时确定最大宽度？@Andrus max width是一个CSS属性，您可以设置它。您无需事先确定，只需将其设置为您的设计可以处理的最大尺寸即可。div不会增加超过该宽度。max-width将表现为其中包含信息，而不管是否有。如果内容太多，还应添加溢出隐藏。如果一个div中有太多内容，一些jquery可以处理该怎么办。@杰夫：我希望div的宽度与最宽的行一样宽，再加上一些ems来为粗体悬停保留空间

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