我可以用CSS"覆盖"HTML元素的宽度吗？

Question

我正在用CSS做一些工作,我有一个<li>元素,<div>里面有一个元素.该<div>元件呈封闭的宽度<li>元素,但内部的文本内容<div>是宽于<li>(并因此进至两行).我想要做的是使其<div>宽度与其最长的文本元素相同,是否有人知道如何做到这一点？谢谢.

<ul style="display: inline-block; list-item-style: none">
  <li id="foo" style="float: left; list-style-type: none; position: relative;">
    <a href="...">brief text</a>
    <div id="bar" style="position: absolute; width=???">
      <ul>
        <li>a long chunk of text</li>
        <li>an even longer piece of text</li>
      </ul>
    </div>
  </li>
</ul>

现在,的宽度div#bar等于它的封闭元件,的宽度的100% li#foo,并且宽度li#foo等于在其文本的宽度<a>标记(加填充和边框).我想做的是做div#bar宽度<li>an even longer piece of text</li>,但我无法弄清楚如何实现这一点,即使使用Javascript ....或者我将被迫使用绝对测量宽度？任何建议将不胜感激.

Answer 1

从#foo和#bar中删除位置属性.

然后加:

<style type="text/css">
#bar li { white-space:nowrap !important; }
</style>