0

我想在一行中显示 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 元素应该对齐。

4

3 回答 3

1

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

这将是如何使用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;
}
于 2013-02-24T03:07:31.037 回答
1

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

div h2 { float: left; }
div ul { float: right; }
于 2013-02-23T19:09:16.323 回答
-1

如果 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 元素的指标设置，因为绝对定位的元素不会强制布局。我希望这有帮助。

于 2013-02-23T19:13:52.557 回答