自動寬度計數器

Question

這是我的代碼：

var counter = 0; 
 

 
$("#links").click(function(){ 
 
    counter = counter - 1; 
 
    $("#mitte a").text(counter); 
 
}); 
 

 
$("#rechts").click(function(){ 
 
    counter = counter + 1; 
 
    $("#mitte a").text(counter); 
 
});

.box { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:gray; 
 
    float:left; 
 
    text-align:center; 
 
    font-family:arial; 
 
    color:white; 
 
    font-size:200%; 
 
    line-height:100px; 
 
    -webkit-user-select:none; 
 
} 
 
#links { 
 
    background-color:#EF4836; 
 
    cursor:pointer; 
 
} 
 
#links:hover { 
 
    background-color:#AF4836; 
 
} 
 
#mitte { 
 
    background-color:#D2D7D3; 
 
} 
 
#rechts { 
 
    background-color:#1BBC9B; 
 
    cursor:pointer; 
 
} 
 
#rechts:hover { 
 
    background-color:#6BBC9B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" id="links"><a>-</a></div> 
 
<div class="box" id="mitte"><a>0</a></div> 
 
<div class="box" id="rechts"><a>+</a></div>

我創建了一個計數器。

使用+和 - 在中間您將看到數字，但如果數字爲10000，則無法在框中看到它。

有人可以爲中間框添加自動寬度代碼嗎？

Answer 1

只要改變

.box { 
    width:100px; 
} 

到

.box { 
    min-width:100px; 
} 

這種方式將在100px的開始和99999後，將增加寬度