Question

你可以看到我有一个包含带li的ul的包装div。 li的含量为25％，因此它们均匀分布在“页面”上。包装div的边框为1px。由于所有的li也都有1px的边框，看起来它们都有2px的边框（我想要的）。

现在。这在桌面上看起来很好但是当你在移动设备上打开它（iphone，android）时，你会看到最后一个li和包装边框之间的包装器右侧有一个小间距。 / p>

这是代码（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中，您将不再看到“小间距”））

如何在移动设备上删除带边框的ul和包装元素之间的空间？

2 个答案: