使所有 <li> 容器内的元素 <ul> 元素相同的宽度

Question

I've been struggling with this for a day or so now and I've gone back and started from square one a couple of times but I'm trying to get a horizontal css flyout header to work as I want.

The dropdown bit I want to expand as wide as needs be (it'd be great if the category names were forced to be on one line) while the container expands to accommodate them. A fiddle will explain better.

http://jsfiddle.net/HyuLy/

Any ideas?

Answer 1

要使<ul>容器内的所有<li>元素具有相同的宽度，请添加以下内容：

div#dropMenu ul.level2 li {width: 100px;}

Answer 2

change code to the following to fill the <li> element inside the <ul> but this will not re-size the container <ul> to get wider to accommodate the <li> .

.subCatodd{
    background-color:#7b631d;
    padding:10px 0;}
.subCateven {
    background-color:#665011;
    padding:10px 0;}

Answer 3

You have a few width: 100% 's that are ruining your layout because of your padding 's. width is the inside width of the element, so when you combine width:100% with, let's say, padding:20px your element is now 100% + 40px.

Also, you have a few float: left 's that shouldn't be there as well. If you're stacking the elements vertically still, there's no need to float: left .

Take a look at this: http://jsfiddle.net/scrimothy/mxW4y/

Since there's so much going on here, you may want to copy this css back into your text editor to see it better. I've removed a few widths and floats

Answer 4

Check this

http://jsfiddle.net/XUj5S/

When you start adding padding to 100% width it will be doing exactly that, that's why your li objects start to overlay their parents they are not 100% they are like 110% cuz of the padding you're adding, here's an example of what I'm saying...

http://jsfiddle.net/EcENF/

You have to define width on px if you start to add padding based on px, using % will just mess up things