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

I'm doing some work with CSS, and I have an <li> element with a <div> element inside of it. The <div> element assumes the width of the enclosing <li> element, but the text content inside the <div> is wider than the <li> (and therefore goes onto two lines). What I want to do is make the <div> the same width as its longest text element, does anyone know how I can do this? Thanks.

我正在用CSS做一些工作,我有一个

元素,里面有一个

元素。

元素假定包含

元素,里面有一个元素。元素假定包含

元素的宽度,但

中的文本内容比

宽(因此转到两行)。我想要做的是使

与其最长的文本元素具有相同的宽度,是否有人知道如何做到这一点?谢谢。

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

Right now, the width of div#bar is equal to 100% of the width of its enclosing element, li#foo, and the width of li#foo is equal to the width of the text in its <a> tag (plus padding and borders). What I want to do is make div#bar be the width of <li>an even longer piece of text</li>, but I can't figure out how to accomplish that, even with Javascript.... or am I going to be forced to use an absolute measurement for the width? Any advice would be greatly appreciated.

现在,div #bar的宽度等于其封闭元素li#foo的宽度的100%,li#foo的宽度等于其标签中文本的宽度(加上填充)和边界)。我想做的是让div#bar成为

更长文本的宽度 ,但我无法弄清楚如何实现这一点,即使使用Javascript ....或者我将*使用绝对测量宽度?任何建议将不胜感激。

7 个解决方案

#1

Strip out the position attributes from #foo and #bar.

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

Then add:

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

#2

put !important after the style value before ;

在之前的风格值之后重要!

Sample:

#element{ width:500px!important;}

#3

try

width:500px instead of width=500px (replace 500 with desired width)

宽度:500px而不是width = 500px(用所需宽度替换500)

http://jsfiddle.net/p4YNA/

#4

<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="float:left;">
   <ul>
  <li>a long chunk of text</li>
  <li>an even longer piece of text</li>
   </ul>
 </div>
  </li>
</ul>

#5

If you can remove the display: inline-block from the outer <ul/> and remove float: left from the foo <li/> then the list will expand to the longest element.

如果你可以从外部

删除display:inline-block并从foo

中删除float:left,那么列表将扩展为最长的元素。

#6

A solution could be to use a fixed width for the #bar. A second solution is to remove position:absolute; from #bar.

解决方案可以是为#bar使用固定宽度。第二种解决方案是移除位置:绝对;来自#bar。

#7

According to the specification, you can can't (see edit) overide it by using a combination of rules that is stronger than the element style.

根据规范,你不能通过使用比元素样式更强的规则组合来覆盖它(见编辑)。

Element style (style="XXX") = 1000
Id (#id)                    = 100
Class (.class)              = 10
element (ie: p)             = 1

So if you are able to specify a css rule with more than 1000, I think you could do it.

因此,如果您能够指定超过1000的css规则,我认为您可以这样做。

EDIT: After some test, if found that a style defined directly in an element can't be overiden by css with this method. Sorry.

编辑:经过一些测试,如果发现直接在元素中定义的样式不能用css用这个方法覆盖。抱歉。