3

ブートストラップ フレームワークからのクラス「ラベル」のスパンがあります。このラベルは 内にネストされており、 内<li>の残りのコンテンツの右側に配置したいと考えてい<li>ます。

CSS を変更しようとする前に、私の li は次のようになります (オレンジ色の「新しいアイテム」はラベルです)。CSSなし

私が試してみるとfloat: right、ラベルは右に移動しますが、ここに示すようにの右上隅にあり<li>ます:右にフロート

ある状況では、新しいアイテム ラベルが次の行にプッシュされることもわかります。これは無関係な問題だと思います。

「新しいアイテム」スパンを右に移動する方法に関するヒントはあります<li>か? デモ用に私がホストしたページへのリンクを次に示します 。

4

5 に答える 5

5

クラスlabelマージンを与えると役立つようです：

span.label {
  float: right;
  margin: 10px;
}
于 2013-02-02T19:58:22.483 に答える
3 
<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <span class="offset1 span2 label pull-right">new item</span>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <span class="offset1 span2 label pull-right">new item</span>
</li>

<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <div class="offset1 span2 btn btn-large">new item</div>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <div class="offset1 span2 btn btn-large">new item</div>
</li>

<li class="row-fluid">
  <div class="span9">Description of item 1</div>
  <span class="offset1 span2 label">new item</span>
</li>
<li class="row-fluid">
  <div class="span9">Description of item 2</div>
  <span class="offset1 span2 label">new item</span>
</li>
于 2013-02-02T19:54:43.493 に答える
1

相対的な位置で試してください

span.label{
float: right;
position:relative;
top:5px;
}

元。http://prntscr.com/rbzpp

于 2013-02-02T20:15:10.567 に答える
0

ボタンを上から中央に配置するためにマージンを使用できます。別のように同じ位置を使用できますposition:absolute; right:0; top:45%。このコードは、画像のサイズ（高さ）が大きくなるとさらに効果的です。

于 2013-02-02T20:32:57.710 に答える
0

これにより、css だけですべての問題が修正されました。

.label-warning, .badge-warning {
    background-color: #f89406;
    float: right;
    margin-top: 9px;
}
.product_summary {
    clear: both;
}
.product_summary img {
    float: left;
}
.name, .price {
    float: left;
    line-height: 37px;
}
于 2013-02-02T20:27:45.500 に答える