изменить абсолютную позицию слева направо в теге диапазона в зависимости от класса
-
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}