自动宽度计数器

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后，将增加宽度