Question

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不能解决问题。

Answer 1

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

使用您的HTML / CSS我可以通过为列表中的每个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端，以允许添加重复的条目。

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

Answer 2

尝试添加填充：0px和margin：0px到你的：hover，你也可以为你的div添加一个最大宽度，以保持你的宽度为单一大小。在我看来，这将解决您的问题。

Answer 3

我不认为您的服务器构建页面时可以确定实际的像素宽度。

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

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

Answer 4

我有一个类似的问题，并发现一种方法来解决它是通过使用一些jQuery，简单和工作：

document.getElementById('search-input').oninput = function() {
    document.getElementById('home').style.display = 'none';
};

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

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

4 个答案: