在iPad上查看时,为什么此按钮与其组不对齐?

时间:2015-04-29 03:33:45

标签: ios css

截图:

enter image description here

我没有看到任何奇怪的HTML:

<ul class="button-group radius">
    <li>
        <a href="
http://www.chineselearnonline.com/lessoncontent/lesson-001-vocabulary/" class="button secondary 
">
  Vocabulary
  </a>
    </li>
    <li>
        <a href="
http://www.chineselearnonline.com/lessoncontent/lesson-001-complete/" class="button secondary
">
  Complete
  </a>
    </li>
    <li>
        <a href="
http://www.chineselearnonline.com/activity/lesson/1" class="button secondary
alert">
  Activity
  </a>
    </li>
    <li>
        <a href="
http://www.chineselearnonline.com/lessoncontent/lesson-001-notes/" class="button secondary
">
  Notes
  </a>
    </li>
    <li>
        <a href="
http://www.chineselearnonline.com/lessoncontent/lesson-001-hints-and-tips/" class="button secondary
">
  Hints &amp; Tips
  </a>
    </li>
    <li>
        <a href="
http://www.chineselearnonline.com/lessoncontent/lesson-one-the-four-tones/" class="button secondary
">
    Comments (
  58  ) 
    </a>
    </li>
</ul>

也不是CSS:

.button-group {
  list-style: none;
  margin: 0;
  left: 0;
}

ul {
  margin-left: 1.1rem;
}


.button-group.radius > :first-child, .button-group.radius > :first-child   > a, .button-group.radius > :first-child > button, .button-group.radius > :first-child > .button {
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.button-group.radius > *, .button-group.radius > * > a, .button-group.radius > * > button, .button-group.radius > * > .button {
  border-radius: 0;
}
.button-group.radius > * {
  margin: 0 -2px;
  display: inline-block;
}

.button-group.radius > :first-child, .button-group.radius > :first-child > a, .button-group.radius > :first-child > button, .button-group.radius > :first-child > .button {
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.button-group.radius > :first-child button, .button-group.radius > :first-child .button {
  border-left: 0;
}

我正在使用Foundation框架

0 个答案:

没有答案