Как убрать подчеркивание текста-декорации; из элемента span внутри родителя flex?
Я хочу удалить подчеркивание из тега <span> внутри тега <p>, который имеет свойство display: flex;.
Тег <p> в моем случае должен быть гибким.
Я уже искал эту проблему в Интернете и нашел решения, которые не применимы к гибкому родителю.
Они сказали, что добавление text-decoration: none; и display: inline-block; в диапазон должно решить проблему, но это не так.
<p style = "display: flex; gap: 10px; text-decoration: underline;">
This should have underline
<span style = "text-decoration: none; display: inline-block;">This should not have underline</span>
</p>
Ответы 3
Удалить display:flex; на <p> должно сработать.
<p style = "text-decoration: underline;">
This should have underline
<span style = "text-decoration: none; display: inline-block;">This should not have underline</span>
</p>Было особое требование, чтобы элемент p был гибким.
Если важно не менять структуру HTML, есть несколько хитрый способ добиться правильного визуального эффекта — явно подчеркнуть диапазон с цветом того же цвета, что и фон, в данном случае белым.
<p style = "display: flex; gap: 10px; text-decoration: underline;">
This should have underline
<span style = "text-decoration: underline; text-decoration-color: white;">This should not have underline</span>
</p>Никогда не следует превращать текстовый контейнер в контейнер flexbox, но если вы хотите сохранить ту же конфигурацию, используйте float в диапазоне. Это не повлияет на макет, а просто отключит распространение подчеркивания.
<p style = "display: flex; gap: 10px; text-decoration: underline;">
This should have underline
<span style = "float: left;">This should not have underline</span>
</p>Этот фрагмент у меня отлично работает в Windows 10 (Chrome/Edge), но не в IOS 16.... Safari.
Спасибо за ваши ответы. Я реструктурировал свой HTML на основе ответа Темани Афифа. Я понял, что использовать flex в <p> — плохая идея и результат спешки. Если вы хотите использовать flex, всегда используйте его в таких контейнерах, как div.