1

フィドルをセットアップしました：http://jsfiddle.net/BaWC8/2/

li を含む ul を含むラッパー 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;
}

理由がわからないので、ここにいる誰かが私を助けてくれることを願っています。

4

2 に答える 2

2

.wrap と ul から float と width を削除します。

境界線は .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-property を .wrap に追加すると、「小さな間隔」が表示されなくなります))

于 2013-08-27T22:04:02.550 に答える