1

我已经设置了一个小提琴：http: //jsfiddle.net/BaWC8/2/

您可以看到我有一个包装 div，其中包含一个带有 li 的 ul。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;
}

我不明白为什么，所以我希望这里有人可以帮助我。

4

2 回答 2

2

从 .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/

于 2013-08-23T21:42:13.883 回答
1

您会看到一个很小的间距，因为 .wrap 宽度是 100%+2px(border-width*2)。

如果您希望边框（或填充）不扩展元素的宽度/高度，您可以使用 box-sizing: border-box; http://css-tricks.com/box-sizing/

将此 css 属性添加到 .wrap ，您将不再看到“小间距”））

于 2013-08-27T22:04:02.550 回答