计数器的自动宽度

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