1

このボックスがあり、レスポンシブにしたい

    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>

ul100% width と li をパディングで中央揃えにしたいのですが、 を追加すると widthの外に出てしまいpaddingます。使いたくないliulbox-sizing

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

box-sizingこれを達成するための他の方法はありますか？

4

1 に答える 1

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>

于 2018-08-12T12:40:09.133 に答える