Question

我想在一行中显示div元素的内容。但是ul元素的宽度是未知的，因为它可以有许多子li元素。 h2总是会占据剩下的空间。每个li元素的宽度为20px。

它看起来像这样：

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

HTML：

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

我在互联网上找到了很多解决方案但不确定选择哪个（适当的解决方案与黑客攻击）。浏览器兼容性不是问题，它只需要处理最新版本的chrome。

更新：将有多行div元素，li元素应对齐。

Answer 1

您可以将h2左侧和ul右侧浮动。

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

Answer 2

最简单，最紧凑和最直接的方法是使用浮子。如果你知道你的元素大小不同，但你不确切知道它们会是什么，那么有两种完全灵活的方法可以解决这个问题。

这将是使用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;
}

这将是如何使用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

如果div的高度和列表项的高度是固定的和已知值，你可以尝试followihg CSS（注意我添加了css类）：

.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 ... */
}

如果你没有指定div的高度，它将由h2元素的指标设置，因为绝对定位的元素不会强制布局。我希望这会有所帮助。

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

3 个答案: