html — Почему я не могу убрать подчеркивание текста?
У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?
.one {
display: block;
text-align: right;
font-size: 30px;
text-decoration: none;
}
div {
width: 50%;
height: 500px;
background: yellow;
text-align: center;
font-size: 50px;
color: purple;
text-decoration: underline;
}<div> <span>Hello, world!</span> <br> <span>Hello!</span> </div>
- html
- css
2
Как указано в MDN
Украшения текста отрисовываются вокруг дочерних элементов. Это значит, что если у элемента установлено свойство
text-decoration, то дочерний элемент не может удалить его для себя.
перевод ответа @xpy
В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float, либо абсолютное позиционирование).
Так же есть уточнение
декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как
inline-blockиinline-table.
.one {
display: inline-block;
text-align: right;
font-size: 30px;
text-decoration: none;
}
div {
width: 50%;
background: yellow;
text-align: center;
font-size: 50px;
color: purple;
text-decoration: underline;
padding: 10px;
}<div> <span>Hello, world!</span> <br> <span>Hello!</span> </div>
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как убрать подчеркивание?
Вопрос задан
Изменён 5 лет 8 месяцев назад
Просмотрен 997 раз
Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у span убрать подчеркивание, в том числе и при наведении как на картинку, так и на сам span? При чем у a подчеркивание есть и должно быть, т.
<span>. Каким только способом не пытался, хоть тресни — подчеркивает. Никогда бы не подумал, что приду сюда с таким вопросом. Подскажите, пожалуйста.span.help,
a span.help,
a:hover span.help {
text-decoration: none;
}<p> <a href="#"><img src="kartinka.jpg"> <span>Мемориальный комплекс</span> </a> </p>
- css
Это происходит, потому что подчеркивание применяется именно к a, а не span, и манипулируя стилями span, вы не сможете повлиять на стили a. Поэтому единственный выход — ввести новый класс, например, help-a:
a {
text-decoration: none
}
a:hover {
text-decoration: underline;
}
a.help-a:hover {
text-decoration: none;
}<p> <a href="#"><img src="kartinka.jpg"> <span>Мемориальный комплекс</span> </a> </p>
jpg">
<span>Мемориальный комплекс</span>
</a>
</p>1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как убрать подчеркивание ссылки в HTML?
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 530 тысяч раз
На моей странице я поместил несколько ссылок, под которыми мне не нужна строка, так как я могу удалить это с помощью HTML?
5
Встроенная версия:
com/">ваш сайт
Однако помните, что обычно вы должны отделять содержимое вашего веб-сайта (которое представляет собой HTML) от представления (которое представляет собой CSS). Поэтому обычно следует избегать встроенных стилей.
См. ответ Джона, чтобы увидеть эквивалентный ответ с использованием CSS.
3
Это удалит все подчеркивания со всех ссылок:
а {украшение текста: нет; }
Если у вас есть определенные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline , и сделайте следующее:
a.nounderline {text-decoration: none; }
Это будет применяться только к этим ссылкам и не затронет все остальные.
Этот код относится к вашего документа или к таблице стилей:
<тип стиля="текст/CSS">
a.nounderline {украшение текста: нет; }
А в теле:
Ссылка
0
Я предлагаю использовать :hover, чтобы избежать подчеркивания, если указатель мыши находится над привязкой
a:hover {
текстовое оформление: нет;
}
Добавьте это во внешнюю таблицу стилей (предпочтительно ):
{украшение текста:нет;}Или добавьте это к
<тип стиля = "текст/css"> {украшение текста:нет;}Или добавить к
сам элемент( не рекомендуется):
com">Текст
Во всех других ответах упоминается украшение текста. Иногда вы используете тему WordPress или чужой CSS, где ссылки подчеркиваются другими методами, так что text-decoration: none не отключит подчеркивание.
Border и box-shadow — еще два известных мне метода подчеркивания ссылок. Чтобы их отключить:
граница: нет;
и
box-shadow: нет;
Все вышеуказанные коды у меня не работали. Когда я копаюсь в проблеме, я понимаю, что она не работает, потому что я поместил стиль после href. Когда я поместил стиль перед href, он работал, как и ожидалось.
ваш сайт
Следующее не рекомендуется, но иногда может оказаться полезным
Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить в свой HTML-тег следующее:
Моя ссылка
Приведенного выше кода будет достаточно.
Просто вставьте его в ссылку,из которой вы хотите убрать подчеркивание.
html —Удаление подчеркивания из ссылки в css
спросил
Изменено 8 лет,5 месяцев назад
Просмотрено 20 тысяч раз
Я пытался удалить уродливое подчеркивание с веб-страницы,но по какой-то причине оно не исчезает.
Я пытался использовать text-decoration:none;и цвет:#FFFFFF;безрезультатно.
Исходный css:
#noday{цвет:#ececec;семейство шрифтов:"Times New Roman",Times,serif;размер шрифта:1em}Фрагмент кода:
Здесь случайный текст
Я просмотрел:удалить упрямое подчеркивание из ссылки,но это не помогло:/
- html
- css
0
Просто добавьте text-decoration:none;От до тег для #noneall :
#noneall a{текстовое оформление:нет}Вот jsfiddle.
1
Попробуйте это,добавьте id (или class ) к вашему a href
случайный текст здесь
и добавьте это в свой файл css:
#thisLink{текстовое оформление:нет}Это должно убрать подчеркивание!
Вот Jsfiddle этого:
http://jsfiddle.net/c0c6g4rd/4/
Добавьте в начало файла css:
a{текстовое оформление:нет}С помощью этих строк вы удалите это подчеркивание из всех ссылок в вашем html.
На всякий случай попробуйте добавить «!important»после text-decoration:none…это «{text-decoration:none !important}». Если это действительно работает,то существует проблема с иерархией,и что-то другое переопределяет ваше объявление. Также попробуйте поместить свое объявление в КОНЕЦ вашего CSS,чтобы переопределить любые другие объявления.
