5

左側にメイン コンテンツを持つネストされた順序付けられていないリストがあり、インデントのレベルに関係なく右側に配置されるように、右にフロートするオプションを追加したいと考えています。

<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
  <ul>
    <li>Item 3 <span class='options'> link </span> </li>
  </ul>
</li>
</ul>

私は次のcssを持っています:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
}

.options {
    float: right;
    width: 50px;
}

ただし、これを使用すると、オプション スパンは右に揃えられますが、予想される行より 1 行下になります。

オプション スパンをリスト アイテムに合わせて取得するにはどうすればよいですか?

ティア、アダム

4

3 に答える 3

11

フローティングの代わりに、絶対配置を試してみてください。

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
    position: relative;
}

.options {
    width: 50px;
    position: absolute;
    right: 0px;
}
于 2009-07-27T13:25:39.803 に答える
1

HTML コードを変更しても問題ない場合は、最初のスパンで「Item 1」を囲み、次のようにします。

  • 左にフロートします (.options は引き続き右にフロートします)
  • display: inline-blockfloat の代わりに、span と .options の両方で使用しますtext-align: right(ただし、Fx2 とは互換性がありません。また、span はデフォルトでインライン要素であるため、IE6/7 でのみ機能します。div では機能しません)。
于 2009-07-27T14:30:28.827 に答える
1

この CSS の使用:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width:400px;
}
.options {
    float: right;
    width: 50px;
}
li li { width:385px}

残念ながら、これには幅からパディングを引いたものを定義する必要があります。あなたの柔軟性に応じて、これは機能します。Chrome 3.0 でテスト済み。

于 2009-07-27T13:50:25.077 に答える