0

我有以下 HTML，我希望第一个项目与左侧对齐，然后将其余三个项目作为一个组与右侧对齐。

我不想在这三个上使用 float:right，因为那样它们就必须在 HTML 中以不正确的顺序出现。

有没有办法将 margin-left 应用于第二个列表项，以便它始终强制自身和三个组向右？请参阅附图以供参考。

<ul class="overview">
  <li class="title">Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

第一个 li 项目向左，组中的其他项目向右对齐

4

2 回答 2

0

看起来您将在该列表周围有一个容器元素。如果是这样，以下内容可能会满足您的需求。

<style type="text/css">
    .container {
        position: relative;
        width: 600px;
        padding: 10px;
        border: 1px solid #f00;
    }
    .overview {
        text-align: right;
        margin: 0;
        padding: 0;
    }
    .overview li {
        display: inline;
        width: 100px;
        height: 20px;
        border: 1px solid #000;
        text-align: left;
    }
    .overview li.title {
        position: absolute;
        left: 10px;
    }
</style>

<div class="container">
    <ul class="overview">
        <li class="title">Some text</li>
        <li>Some text</li>
        <li>Some text</li>
        <li>Some text</li>
    </ul>
</div>
于 2012-06-16T03:50:30.393 回答
0

如果语义对您来说并不重要，那么您可以使用table.

于 2012-06-16T03:32:10.870 回答