3

I would like to use the full width of the UL-element for the floated LI-elements. Is this somehow possible with using %-values for the padding of the LI-elements? I can't use a fixed width for the LIs, since the content is not the same lenght.

This is my HTML code:

<ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>...</li>
</ul>

And here comes my CSS:

ul {
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 600px;
    background-color: blue;
}

li {
    float: left;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #dd0000;
    border-left: 1px solid #ffffff;
}

li:hover {
    background-color: #ff0000;
}

Find the example at JsFiddle: http://jsfiddle.net/6Uy4y/ So the red LI-elements should end, where the blue UL ends, even when changing the width of the UL.

Thanks for pointing me into the right direction!

4

1 回答 1

2

看起来这是表格数据的开始。我会用一个<table>. 如果我弄错了，你可以用 CSS 伪造一个表格。

ul {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
  display: table-cell;
  padding: 0 3%;
}

这是一个快速的小演示：http: //jsbin.com/iwacum/1/edit

于 2013-07-21T14:16:22.977 回答