0

現在、ボタンのクリック数を表示するスパンタグがあります。現在、数値が3桁を超える場合、スパンタグ内に収まりません。スパンタグを調整可能にすることはできますか、それとも幅を調整可能にして、常にオンクリック数を含めることができますか？

より多くの桁に対応するように幅を変更できますが、実際に発生するonclickイベントの数を予測できないため、調整可能にしたいと思います。

var counts = {
  'Apples': 0,
  'Oranges': 0,
  'total': 0
};

   function countFruit(type) {
   document.getElementById('fruitCount').innerHTML = ++counts['total'];
   document.getElementById(type + 'Count').innerHTML = ++counts[type];
}


#OrangesCount{
z-index: 20;
position:absolute;
top:70px;
left:45%;
background-color:black;
width:80px;
border:2px solid green;
font-family: 'BPdotsUnicaseSquareBold';
font-size:25px;
color:yellow;
padding-right:4px;
padding-left:4px;
 }


#ApplesCount{
z-index: 20;
position:absolute;
color:yellow;
top:70px;
right:45%;
background-color:black;
width:80px;
border:2px solid green;
font-family: 'BPdotsUnicaseSquareBold';
font-size:25px;
   }

   <a id="buttonright" href="#" onclick="countFruit('Apples'); return false;">
   <a id="buttonleft" href="#" onclick="countFruit('Oranges'); return false;">

   <span id="ApplesCount"></span>
   <span id="OrangesCount"></span>
4

2 に答える 2

0

width両方のCSSから削除する必要があります：

#ApplesCount{
    z-index: 20;
    position:absolute;
    color:yellow;
    top:70px;
    right:45%;
    background-color:black;
    border:2px solid #550010;
    font-family: 'BPdotsUnicaseSquareBold';
    font-size:25px;
}

これがJSFiddleです

于 2012-09-03T00:37:44.713 に答える
0

要素がその幅を自動的に調整できるようにする必要がある場合は、その幅を固定しないでください。以下のCSSの例のように、代わりに最小幅を指定できます。

#OrangesCount{
z-index: 20;
position:absolute;
top:70px;
left:45%;
background-color:black;

/*removed
width:80px;
*/
min-width:80px;

border:2px solid #001855;
font-family: 'BPdotsUnicaseSquareBold';
font-size:25px;
color:yellow;
padding-right:4px;
padding-left:4px;
}


#ApplesCount{
z-index: 20;
position:absolute;
color:yellow;
top:70px;
right:45%;
background-color:black;

/*removed
width:80px;
*/
min-width:80px;

border:2px solid #550010;
font-family: 'BPdotsUnicaseSquareBold';
font-size:25px;
}
于 2012-09-03T00:48:04.320 に答える