所以我正在嘗試創建一個頁腳，我有幾個鏈接特色但是鏈接上的默認文本裝飾奇怪地沒有回應文本裝飾無。除了 text-decoration none 之外，所有其他文本裝飾選項都可以使用。我什至嘗試對 bootstrap.min.css 檔案進行更改，因為我看到它建議作為解決方案，但它沒有奏效。
.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>[email protected]</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>“無”選項。
uj5u.com熱心網友回復：
把它交給a-element
.company-item a {
text-decoration: none;
color: inherit;
}
這將是您的代碼：
.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>[email protected]</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>uj5u.com熱心網友回復：
您必須使用company-item awhen 樣式，因為默認情況下鏈接已設定樣式，因此您必須直接呼叫該元素。此外，添加!important;了良好的措施。
.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>[email protected]</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>uj5u.com熱心網友回復：
.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>[email protected]</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>我認為問題在于它是選擇串列項而不是鏈接無論如何這有效
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/361248.html
上一篇：我已經通過FlutterWeb和AWS創建了SiteWeb，可從https獲取。但是php讀取Mysql沒有答案