css - 响应式和固定在一起

Question

我希望有一个 100% 宽的列表。然而，每个列表项的开头将是一个设置的宽度。

<div>
    <ul>
        <li><span>This</span> One</li>
        <li><span>This</span> Two</li>
        <li><span>This</span> Three</li>
    </ul>
</div>

Answer 1

if i understand the question correctly you can just set the ul to

display:block; width:100%;

and you elements to however large you want them

DEMO http://jsfiddle.net/t2VFe/

let me know if you meant something different and I can answer :)

Answer 2

I think you mean that the first list item is fixed, but the rest should be responsive? Please clarify.

The CSS only solution I know of is the css calc method. Let's say you have four items in total and your first item is 200px wide, you would do it like this:

ul > li {
    width: 25%; /* Fall back */
    width: -webkit-calc((100% - 200px) / 3);
    width: -moz-calc((100% - 200px) / 3);
    width: calc((100% - 200px) / 3);
}
ul > li:first-child {width: 200px;}

Fiddle (adapted from Shalom Aptekar).

Note: not all browsers support this method. See here.