如何在移動設備上刪除帶邊框的ul和包裝元素之間的空間？

Question

我設置了一個小提琴： http ： //jsfiddle.net/BaWC8/2/

你可以看到我有一個包含ul和li的包裝div。 li的含量為25％，因此它們均勻分布在“頁面”上。 包裝div的邊框為1px。 由於所有的li也都有1px的邊框，看起來它們都有2px的邊框（我想要的）。

現在。 這在桌面上看起來很好但是當你在移動設備 （iphone，android） 上打開它時 ，你會看到最后一個li和包裝邊框之間的包裝器右側有一個小間距。

這是代碼（html）：

<div class="wrap">
    <ul>
        <li><a href="#"><span>aaaa</span></a></li>
        <li><a href="#"><span>bbbb</span></a></li>
        <li><a href="#"><span>cccc</span></a></li>
        <li><a href="#"><span>dddd</span></a></li>
    </ul>
</div>

CSS：

body{
    text-align: center;
    background: #000;
}
.wrap {
    margin: 0px auto;
    border: 1px solid #fff;
    float: left;
    width: 100%;
} 

.wrap ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
        width: 100%;
}

.wrap ul li {
    display: list-item;
    float: left;
    margin: 0px;
    padding: 0px;
    width: 25%;
}

.wrap ul li a {
    display: block;
    border: 1px solid #fff;
}

.wrap il li a span {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
}

我不明白為什么所以我希望有人可以幫助我。

Answer 1

從.wrap和ul中刪除浮動和寬度。

.wrap上的邊框將崩潰，您可以使用clearfix解決，也可以添加overflow：auto。

這是我的工作CSS：

body {
  text-align: center;
  background: #000;
}
.wrap {
  margin: 0px auto;
  border: 1px solid #fff;
  overflow:auto;
} 
.wrap ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.wrap ul li {
  display: list-item;
  float: left;
  margin: 0px;
  padding: 0px;
  width: 25%;
}
.wrap ul li a {
  display: block;
  border: 1px solid #fff;
}
.wrap il li a span {
  width: 100%;
  height: 100%;
  float: left;
  display: block;
}

一個工作小提琴，至少在iOS上： http ： //jsfiddle.net/designingsean/BaWC8/7/

Answer 2

你會看到一個很小的間距因為.wrap寬度是100％+ 2px（border-width * 2）。

如果你想邊框（或填充）不擴展元素的寬度/高度，你可以使用box-sizing：border-box; http://css-tricks.com/box-sizing/

將此css-property添加到.wrap，您將不再看到“小間距”））