1

ユーザーがカートにいくつかの製品を追加できるシステムを作成しています。上矢印と下矢印でいくつかのアイテムを追加できるようにしたいと考えています。これらの矢印は、テキストの右側にあります。現在のセットアップで JSFiddle を準備しました。

フィドル

html:

<p>1</p>
<div class="addbutton"></div>
<div class="minbutton"></div>

そしてCSS：

p {
    display: inline-block;
    margin: 0;
}

.addbutton {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    display: inline-block;
}

.minbutton {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    display: inline-block;
}

今、私は矢印をお互いの上に置きたいのですが（それらの間に少しマージンがあります）、それを行う方法がわかりません。誰でもこれを達成するのを手伝ってもらえますか?

ありがとう！

4

2 に答える 2

3

クラスに追加position: absolute;します。.addbuttonこのようにして、その場所にとどまりますが、次の要素を同じ位置にレンダリングできます。これがあなたのフィドルです

于 2013-07-26T14:36:36.477 に答える
2

.addbutton クラスを inline-block ではなく block に変更します

   .addbutton {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  display: block;
   }
于 2013-07-26T14:34:26.207 に答える