изменить абсолютную позицию слева направо в теге диапазона в зависимости от класса

StackOverflow https://stackoverflow.com/questions/1697975

  •  18-09-2019
  •  | 
  •  

Вопрос

Это мой первый вопрос, но я уверен, что их будет еще много.У меня есть небольшая проблема с позицией, и я хотел бы знать, возможно ли ее вообще решить.

У меня есть неупорядоченный список (<ul>) с плавающим <li>Итак, для основных опций я перемещаю их влево, а для опций контактов и поддержки я перемещаю их вправо, пока все хорошо.Теперь у меня есть <span> внутри каждого <li> который я показываю под горизонтальным списком, этот список предназначен для меню.Эти <span>s работает как описание выбора меню и обычных опций, которые я использую. position:absolute; top:30px; left:0; это работает, как и предполагалось.Теперь я хотел бы изменить атрибуты позиции для тех пунктов меню, которые я плаваю правильно, чтобы диапазон стал position:absolute; top:30px; right:0; и это вообще не работает.Кажется, что это невозможно изменить с помощью более конкретного правила CSS, чем другое, но float работает отлично.

HTML:

<div id="menu">
<ul>
    <li>Menu1<span>Info1</span></li>
    <li>Menu2<span>Info2</span></li>
    <li class="support">Support1<span>Info3</span></li>
</ul>

CSS:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

Последняя строка CSS не имеет значения!Если у кого-то есть ответ или обходной путь, я очень ценю помощь.

Ответ на вопрос и проблема решена.Проверьте сообщения Джеймса Арона или Меркатора.

Это было полезно?

Решение

Даже думал, что ты установил right:0, твой left:0 все еще передается по наследству.Вам нужно установить left:auto чтобы переопределить этот стиль для support сорт.

Другие советы

Судя по этому CSS, вы, похоже, неправильно его понимаете или, по крайней мере, неправильно его используете.Возможно, вы захотите прочитать статью SitePoint о каскад, специфичность и наследование за хорошее знакомство.

Причина, по которой это не работает, заключается в том, что последний два строки этого CSS применяются к элементам списка с support сорт.Предпоследняя строка относится к все элементы списка, а последняя строка добавляется к этому для support перечислить предметы.Итак, поскольку нет left свойство в этой последней строке, left свойство каскадируется вниз от предыдущей строки, что делает его left: 0 слишком.

Когда вы используете класс для обозначения особого случая, вам не следует повторять весь CSS общего случая, а только предоставлять CSS, необходимый для его изменения:

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span {left:auto; right:0;}

Этот CSS будет означать supportЭлементы списка -class получают весь CSS, который получают другие элементы списка, но с left свойство сбрасывается на значение по умолчанию, и right Вместо этого набор свойств.

Хм, странно.Я не могу сказать вам, почему ваш код не работает, он должен работать, поскольку диапазон support:hover является более конкретным селектором.

Однако нашел исправление:Положение абсолютных элементов осталось:0;по умолчанию.Если удалить слева:0;из селектора диапазона это будет работать.

Ваш код будет выглядеть так:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top