Ошибка неупорядоченного списка

Question

Ошибка неупорядоченного списка

0

У меня проблема с макетами в ul. По какой-то неизвестной причине первый li в моей ul. См. Изображение.

Вот мой html:

         <ul class="mobile-group">
            <li>
                <a href="#" class="link">
                    <span class="mag-glass">&#9906</span>
                </a>
            </li>
            <li>
                <a href="#" class="link">
                    <img src="http://placehold.it/50x40&text=LafLife"> &#8711;
                </a>
            </li>
        </ul>

и мой css:

.mag-glass{
    color: #999;
    font-size: 2em;
    vertical-align:middle;
    display:inline-block;
    line-height: .5;
    box-sizing: border-box;
    clear: both;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group{
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    padding: 0em .75em 0 .75em;
    box-sizing: border-box;
    border-left: 1px solid #888;
}

ul.mobile-group li a{
    color: #999;
    text-decoration: none;
}

Пожалуйста, любая помощь велик.

Tithos 09 нояб. 2013, в 21:11

Источник

Теги:

html

css

html-lists

2 ответа

Ещё вопросы

arnonate · Answer 1 · 2013-11-09T19-10-00.000Z

Был в состоянии исправить это со следующим css....

ul.mobile-group {
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    position: relative;
    padding: 0em .75em 0 .75em;
    border-left: 1px solid #888;
}

.mag-glass{
    position: absolute;
    top: -6px;
    color: #999;
    font-size: 2.2em;
    display: block;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group li a{
    color: #999;
    display: block;
    height: 40px;
    min-width: 16px;
    text-decoration: none;
}

Я просто позиционировал магнитное стекло абсолютно внутри блока ссылок, потому что казалось, что значок был на самом деле выше 40 пикселей и нажал первый блок вниз.

Вот он работает... http://codepen.io/anon/pen/Etxfz

вот что я получаю: codepen.io/timbo27/pen/aEctL
почему то, что я вижу в работе кодового пера, а что нет на моем сайте ?!
У вас должны быть некоторые другие стили поверх стилей меню. Вы используете бутстрап? Можете ли вы использовать инспектор, чтобы увидеть, не противоречит ли что-то еще в вашей таблице стилей?

Joe Austin · Answer 2 · 2013-11-09T17-42-00.000Z

удалите высоту линии. Это должно делать свое дело

это исправило первый ли, но оттолкнуло последний. без высоты линии, как я могу вертикально выровнять стекло магнита?