ios - Why is this button unaligned with its group when viewed on iPad? -
a screenshot:

i don't see weird 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 & tips </a> </li> <li> <a href=" http://www.chineselearnonline.com/lessoncontent/lesson-one-the-four-tones/" class="button secondary "> comments ( 58 ) </a> </li> </ul> nor 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; } i'm using foundation framework
Comments
Post a Comment