CSS灵活布局：灵活的左列和可变的固定右列

Question

I want to display the content of the div element in a single row. However the width of the ul element is unknown because it can have a number of child li elements. The h2 would always occupy the rest of the space. each li element has a width of 20px.

It would look something like this:

|----h2------------|li|li|li||
|----h2---------------|li|li||

HTML:

<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

I have found numerous solutions on the internet but not sure which to choose (proper solution vs hacks). browser compatibility is not an issue, it only needs to work on the latest version of chrome.

Update: There will be multiple rows of div elements and the li elements should align.

Answer 1

You could float the h2 left, and the ul right.

div h2 { float: left; }
div ul { float: right; }

Answer 2

The simplest, most compact and straight forward way is to use floats. If you know your elements will be different sizes, but you don't know exactly what they will be, there are 2 completely flexible ways to go about this.

This would be how to do it using display: table :

http://jsfiddle.net/8uTfp/1/

div {
    display: table;
    width: 100%;
}

h1, ul {
    display: table-cell;
    vertical-align: middle;
}

ul {
  text-align: right;
}

li {
  display: inline-block;
}

This would be how to do it using flexbox:

http://jsfiddle.net/8uTfp/

div {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  margin-left: auto;
}

li {
  display: inline-block;
}

Answer 3

If the div's height and the list items' height are fixed and known values, you could try the followihg CSS (notice I added css classes):

.container{
  height: 30px;
  position: relative;
}
.container ul{
  padding: 0; margin: 0;
  /* Other reset rules here ... */
  position: absolute;
  top: 0;
  right: 0;
}
.container ul li{
  display: inline;
  float: left;
  height: 30px;
  /* Other format rules here ... */
}

If you don't specify the div's height, it will be set by the h2 element's metrics, since absolutely positioned elements don't force the layout. I hope this helps.