替代大小调整

Question

我有这个盒子，我想让它具有响应性

    h2{
        margin: 0;
        padding: 0;
        border: 0;
    }

ul {
    background: #fff;
    float: left;
    padding: 15px 0;
    width: 655px;
    border: 1px solid #000;
    border-bottom: 0;
}
ul li {
    float: left;
    /*width: auto;*/
    text-align: center;
    width: 202px;
    padding: 0 8px;
    margin-bottom: 7px;
}
ul li .img{
    position: relative;
    border: 1px solid #000;
    /*padding: 10px;*/
    padding: 0;
    text-align: center;
}
.info {
    background: orange;
    border: 1px solid #000;
    padding: 0 6px 5px;
    border-width: 0 1px 2px 1px;
}

<ul>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div>	
      <div class="info">
    			<h2>contact us</h2>
    		</div>
    	</li>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div>	
      <div class="info">
    			<h2>contact us</h2>
    		</div>
    	</li>
	  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div>	
  <div class="info">
			<h2>contact us</h2>
		</div>
	</li>
    </ul>

我想使ul的宽度为100％，并且li以填充为中心，但是如果添加padding，则li超出ul的宽度。我不想使用box-sizing

webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

请问box-sizing是否有其他方法可以替代？

Answer 1

只需删除无用的属性，而无需使用box-sizing

h2{
    margin: 0;
    padding: 0;
    border: 0;
}

ul {
    background: #fff;
    /*float: left;*/
    padding: 15px 0;
    /*width: 100%;*/
    border: 1px solid #000;
    border-bottom: 0;
}
ul li {
    /*float: left;*/
    /*width: auto;*/
    text-align: center;
    /*width: 100%;*/
    padding: 0 8px;
    margin-bottom: 7px;
}
ul li .img{
    position: relative;
    border: 1px solid #000;
    /*padding: 10px;*/
    padding: 0;
    text-align: center;
}
.info {
    background: orange;
    border: 1px solid #000;
    padding: 0 6px 5px;
    border-width: 0 1px 2px 1px;
}

<ul>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div>	
  <div class="info">
			<h2>contact us</h2>
		</div>
	</li>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div>	
  <div class="info">
			<h2>contact us</h2>
		</div>
	</li>
</ul>