样式问题：text-decoration none 不起作用

Question

So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn't worked.

 .custom-footer{ background-color: tomato; }.list-items{ list-style: none; margin: 0; padding: 0; }.company-item{ text-decoration: none; color: inherit; }

 <footer> <div class="container-fluid custom-footer"> <div class="row footer-logo"> <div class="col"><img src="/images/Logo_White.png" alt="" width="150px"> </div> </div> <div class="row"> <div class=" col footer-column px-4"> <h6>Company</h6> <ul class="list-items"> <li class="company-item"><a href="">Become a rider</a></li> <li class="company-item"><a href="">Our Story</a></li> <li class="company-item"><a href="">Our Team</a></li> <li class="company-item"><a href="">Contacts</a></li> <li class="company-item"><a href="">Partners</a></li> </ul> </div> <div class="col footer-column"> <h6>Product</h6> <ul class="list-items"> <li class="product-item"><a href="">Ride safely</a></li> <li class="product-item"><a href="">How it works</a></li> <li class="product-item"><a href="">testimonials</a></li> </ul> </div> <div class="col footer-column contacts"> <p>+254 111 220 055</p> <p>info@tissboda.com</p> <p>Nairobi, Kenya</p> </div> </div> <div class="row"> <div class="col px-4"> <ul class="list-items"> <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li> </ul> </div> <div class="col"></div> <div class="col"> <img src="/images/google-play-badge.png" alt="" width="150px"> </div> </div> <div class="row"> <div class="col px-4"> <p>©2021 TissBoda. All Rights Reserved</p> </div> <div class="col"></div> <div class="col d-flex"> <ul class="list-items"> <li class="legal-link"><a href="">Privacy</a></li> <li class="legal-link"><a href="">Terms</a></li> </ul> </div> </div> </div> </footer>

'none' option.

Answer 1

Give it to the a -element

.company-item a {
  text-decoration: none;
  color: inherit;
}

---

This would be your code:

 .custom-footer{ background-color: tomato; }.list-items{ list-style: none; margin: 0; padding: 0; }.company-item a{ text-decoration: none; color: inherit; }

 <footer> <div class="container-fluid custom-footer"> <div class="row footer-logo"> <div class="col"><img src="/images/Logo_White.png" alt="" width="150px"> </div> </div> <div class="row"> <div class=" col footer-column px-4"> <h6>Company</h6> <ul class="list-items"> <li class="company-item"><a href="">Become a rider</a></li> <li class="company-item"><a href="">Our Story</a></li> <li class="company-item"><a href="">Our Team</a></li> <li class="company-item"><a href="">Contacts</a></li> <li class="company-item"><a href="">Partners</a></li> </ul> </div> <div class="col footer-column"> <h6>Product</h6> <ul class="list-items"> <li class="product-item"><a href="">Ride safely</a></li> <li class="product-item"><a href="">How it works</a></li> <li class="product-item"><a href="">testimonials</a></li> </ul> </div> <div class="col footer-column contacts"> <p>+254 111 220 055</p> <p>info@tissboda.com</p> <p>Nairobi, Kenya</p> </div> </div> <div class="row"> <div class="col px-4"> <ul class="list-items"> <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li> </ul> </div> <div class="col"></div> <div class="col"> <img src="/images/google-play-badge.png" alt="" width="150px"> </div> </div> <div class="row"> <div class="col px-4"> <p>©2021 TissBoda. All Rights Reserved</p> </div> <div class="col"></div> <div class="col d-flex"> <ul class="list-items"> <li class="legal-link"><a href="">Privacy</a></li> <li class="legal-link"><a href="">Terms</a></li> </ul> </div> </div> </div> </footer>

Answer 2

You have to use company-item a when styling because links are styled by default so you have to call directly to that element. Also, added ;important; for good measures.

 .custom-footer{ background-color: tomato; }.list-items{ list-style: none; margin: 0; padding: 0; }.company-item a { text-decoration: none;important: color; inherit; }

 <footer> <div class="container-fluid custom-footer"> <div class="row footer-logo"> <div class="col"><img src="/images/Logo_White.png" alt="" width="150px"> </div> </div> <div class="row"> <div class=" col footer-column px-4"> <h6>Company</h6> <ul class="list-items"> <li class="company-item"><a href="">Become a rider</a></li> <li class="company-item"><a href="">Our Story</a></li> <li class="company-item"><a href="">Our Team</a></li> <li class="company-item"><a href="">Contacts</a></li> <li class="company-item"><a href="">Partners</a></li> </ul> </div> <div class="col footer-column"> <h6>Product</h6> <ul class="list-items"> <li class="product-item"><a href="">Ride safely</a></li> <li class="product-item"><a href="">How it works</a></li> <li class="product-item"><a href="">testimonials</a></li> </ul> </div> <div class="col footer-column contacts"> <p>+254 111 220 055</p> <p>info@tissboda.com</p> <p>Nairobi, Kenya</p> </div> </div> <div class="row"> <div class="col px-4"> <ul class="list-items"> <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li> </ul> </div> <div class="col"></div> <div class="col"> <img src="/images/google-play-badge.png" alt="" width="150px"> </div> </div> <div class="row"> <div class="col px-4"> <p>©2021 TissBoda. All Rights Reserved</p> </div> <div class="col"></div> <div class="col d-flex"> <ul class="list-items"> <li class="legal-link"><a href="">Privacy</a></li> <li class="legal-link"><a href="">Terms</a></li> </ul> </div> </div> </div> </footer>

Answer 3

 .custom-footer{ background-color: tomato; }.list-items{ list-style: none; margin: 0; padding: 0; }.company-item a{ text-decoration: none; color: inherit; }

 <footer> <div class="container-fluid custom-footer"> <div class="row footer-logo"> <div class="col"><img src="/images/Logo_White.png" alt="" width="150px"> </div> </div> <div class="row"> <div class=" col footer-column px-4"> <h6>Company</h6> <ul class="list-items"> <li class="company-item"><a href="">Become a rider</a></li> <li class="company-item"><a href="">Our Story</a></li> <li class="company-item"><a href="">Our Team</a></li> <li class="company-item"><a href="">Contacts</a></li> <li class="company-item"><a href="">Partners</a></li> </ul> </div> <div class="col footer-column"> <h6>Product</h6> <ul class="list-items"> <li class="product-item"><a href="">Ride safely</a></li> <li class="product-item"><a href="">How it works</a></li> <li class="product-item"><a href="">testimonials</a></li> </ul> </div> <div class="col footer-column contacts"> <p>+254 111 220 055</p> <p>info@tissboda.com</p> <p>Nairobi, Kenya</p> </div> </div> <div class="row"> <div class="col px-4"> <ul class="list-items"> <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li> <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li> </ul> </div> <div class="col"></div> <div class="col"> <img src="/images/google-play-badge.png" alt="" width="150px"> </div> </div> <div class="row"> <div class="col px-4"> <p>©2021 TissBoda. All Rights Reserved</p> </div> <div class="col"></div> <div class="col d-flex"> <ul class="list-items"> <li class="legal-link"><a href="">Privacy</a></li> <li class="legal-link"><a href="">Terms</a></li> </ul> </div> </div> </div> </footer>

i think the problem was it was selecting the list items and not the links anyway this works